这几篇,查看angular 源码. rotuerLinkActive 是路由的样式设置. 它的值是 css 的一个类.或者几个类. 主要代码如下 @Input() set routerLinkActive(data: string[]|string) { const classes = Array.isArray(data) ? data : data.split(' '); this.classes = classes.filter(c => !!c); } ngOnChanges(chang…

一.directive的注册 1.我们知道,我们可以通过类似下面的代码定义一个指令(directive). var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', // or // func…

一.首先抛出两个问题 问题一:在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,视图上什么都没有,并且会抛出一…

我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$parse的源码打开一看,它的代码量有接近两千行.翻开angular的api文档,官方只给出了简短的解释"Converts Angular expression into a function(将一个angular的表达式转化为一个函数)",心中神兽奔腾----就这么点功能为什么要"…

在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到controller中的一个具体的$scope都是一个个具体的对象.$rootscope之所以被称为"root"的原因就是他是所有scope的祖先,$rootscope是在angular启动流程中建立的(上上期讲过),而被注入到controller中的$scope则是在视图创建的时候通过父辈的$s…

最开始使用angular的时候,总是觉得它的依赖注入方式非常神奇. 如果你跳槽的时候对新公司说,我曾经使用过angular,那他们肯定会问你angular的依赖注入原理是什么? 这篇博客其实是angular源码阅读之路的一个必经站点,就是要理解injector,provider,module之间的关系--这关系其实就是依赖注入的本质. 那么请专注地看下面这一段话吧: 通俗一点的理解: module是发布任务的BOSS. injector是领取任务的中间人. provider是真正去执行任务的马仔…

angular源码其实结构非常清晰,划分的有条有理的,大概就是这样子: (function(window,document,jquery,undefined){ //一些工具函数 //EXPR 编译器 自执行 //setupModuleLoader方法,公司内部的框架是vxsetup方法,(只是定义,没有调用) //moduler方法() //angular初始化方法,公司内部的框架是vxinit方法 //bootstrap //createInjector //一系列指令,服务,过滤器等指令…

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

今天做了一些图来说明angular,由于angular实在太复杂了,不知道用什么图表示比较好,所以就胡乱画了一些,希望有人能看得懂. 一.源码文件编译合并顺序图 二.angular.module函数功能图 三.publishExternalAPI函数功能图 四.注入器工厂函数createInjector内部的providerCache和instanceCache 上一期:angular源码分析:angular的整个加载流程 下期预告:angular源码分析:angular中$rootscope的…