We have two blocks to show to difference ways to do animation in Angular: <button (click)="toggleState()">Toggle</button> <div style="display: flex; align-items: center; align-content: space-between;"> <section [@h…

在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的angular的编辑顺序图的缩略版: ├─── angular.prefix //util.wrap函数加入的前缀代码 │ ├─── minErr.js //错误处理 ├─── Angular.js //主要定义angular的工具函数 ├─── loader.js //定义了setupModuleLo…

angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angular.bootstrap //angular启动函数,一般不用,除了e2e测试 angular.copy //对象拷贝 angular.element //jQlite,作用类似于jQuery angular.equals //对象比较.用 == 对两个对象进行比较,除非他们是同一个对象的引用,否…

一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入的概念最早使用时在java编程中.依赖注入和控制反转差不多是一个概念,是编程中一种重要的解耦手段.依赖注入不是目的,它是一系列工具和手段,最终的目的是帮助我们开发出松散耦合.可维护.可测试的代码和程序.这条原则的做法是大家熟知的面向接口,或者说是面向抽象编程.具体含义是:当某个角色(可能是一个对象实…

We can treat Angular Element as each standlone lib and compile each Angular element spreatly. Tool we are using to compile Angular element is 'ngx-build-plus': Install: npm i --save ngx-build-plus It modifies the angular.json to use ngx-build-plus to…

一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配置呢? 问题二:绑定的数据是如何被解析的呢?我们通过对$parse的分析,应该猜到绑定到模版的表达式最终会被传给$parse服务来处理,那么是谁将表达式从html字符串中给读取出来的呢? 二.$interpolate的功能 $interpolate是一个angular的内部服务,专门给$compil…

一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/">王大鹏</a>'绑定到angular的视图上,希望视图上显示的一个链接. 1.如果,我采用ng-bind="x",或者{{x}},我在视图看到的结果就是上面那个字符串,就说里面的都被转义了. 2.如果,我在用ng-bind-html,视图上什么都没有,并且会抛出一…

1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).success().error(); $http.jsonp(url,{params:{wd:'',cb:'JSON_CALLBACK'}}).success().error(); 注意jsonp中cb在angular中规定只能使用JSON_CALLBACK $watch(谁,做什么,false): 谁…

一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 return element; } var argIsString; if (isString(element)) { //情况2 element = trim(element); //先去掉两头的空格.制表等字符 argIsString = true; } if (!(this instanceof…

一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看来,阅读编译后的源码至少有两点不好. 1.编译已经将所有的代码合并在一起了,这会丢失掉作者模块设计的思想,不利于理解代码架构的精髓,甚至想理解代码都很难. 2.编译合并后的angular代码有2万多行,想要看完,早已望而生畏.相反阅读编译前的代码,可以一个模块一个模块的逐个击破. 但是编译前的源码中的确文件一…