`
openxtiger
  • 浏览: 147512 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

[angularjs之我见] angularjs,那些特性让我很好奇

 
阅读更多

学习一种语言,不仅仅只会用,更多的是对一种语言的好奇,总有想知道原理的决心。让angularjs有哪些好奇点呢?

1.注入器(Injector)

2.模块(Module)

3.服务(Serivce或Provider)

4.作用域(Scope)

5.双向绑定(Tow way binding)

 

 

 

问题:

1.函数的DI是什么时间产生的?

在使用他的场景中,一般为:module中的config,module中的run,$ControllerProvider触发

2.双向绑定是通过scope的$watch和$digest实现的,那系统是什么时间调用$digest这个函数的呢?

(所有的可输入控件和事件都会去调用$apply,而$apply间接调用$digest)。

那在控制器或service改变$scope时,是什么时间去调用$digest?

 由于控制器和service都是由系统启动的,因此在调用bootstrap时,最后会通过以下代码统一调用一次$apply

 

injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', '$animate',
        function (scope, element, compile, injector, animate) {
            scope.$apply(function () {
                element.data('$injector', injector);
                compile(element)(scope);
            });
        }]
);

 

 3.作用域是怎么产生的,如何为指令的链接分配作用域的?

 作用域是在链接时产生,系统上从HTML的最外层一直向里层连接,如果遇到需要创建scope的地方,就创建,否则原用父层的scope

 

$node = jqLite(node);

if (nodeLinkFn) {
    if (nodeLinkFn.scope) {
        childScope = scope.$new();
        $node.data('$scope', childScope);
    } else {
        childScope = scope;
    }
    childTranscludeFn = nodeLinkFn.transclude;
    if (childTranscludeFn || (!boundTranscludeFn && transcludeFn)) {
        nodeLinkFn(childLinkFn, childScope, node, $rootElement,
            createBoundTranscludeFn(scope, childTranscludeFn || transcludeFn)
        );
    } else {
        nodeLinkFn(childLinkFn, childScope, node, $rootElement, boundTranscludeFn);
    }
} else if (childLinkFn) {
    childLinkFn(scope, node.childNodes, undefined, boundTranscludeFn);
}
 以上是compositeLinkFn的一部分,而其中的childLinkFn为孩子的compositeLinkFn,nodeLinkFn中会调用childLinkFn,因此这些函数会不停的调下去,直到nodeLinkFn和childLinkFn都为空。
 nodeLinkFn这个函数共做3个步骤
A.调用指令的预处理连接(指令compile函数返回时,返回含pre连接函数的对象)
B.调用childLinkFn
C.调用指令的后处理连接(指令中提供的compile和link)

 4.为何作用域中变量会有继承关系?

在链接中,会产生两种作用域,一种为独立的,一种是由父亲产生的儿子作用域是继承(采用原型链的机制)

if (isolate) {
    child = new Scope();
    child.$root = this.$root;
    // ensure that there is just one async queue per $rootScope and its children
    child.$$asyncQueue = this.$$asyncQueue;
    child.$$postDigestQueue = this.$$postDigestQueue;
} else {
    ChildScope = function () {
    }; // should be anonymous; This is so that when the minifier munges
    // the name it does not become random set of chars. This will then show up as class
    // name in the web inspector.
    ChildScope.prototype = this;
    child = new ChildScope();
    child.$id = nextUid();
}

 

 

 

分享到:
评论

相关推荐

    Mastering Web Application Development with AngularJS

    其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用...

    AngularJS中文版pdf+精通AngularJS PDF

    两本书的pdf:AngularJS中文版+精通AngularJS,提供方式:百度云链接+密码

    AngularJS高级程序设计

    第2部分为第9章到第17章,引导读者熟悉AngularJS库的各种特性,从对一个AngularJS应用程序中各种不同组件的概览开始,然后依次深入介绍每种类型的组件。第3部分为第18章到第25章,解释了AngularJS中的两个重要组件...

    AngularJS书两本

    AngularJS_权威教程.pdf AngularJS_深度剖析与最佳实践.pdf

    Angularjs 合集 Angularjs 合集

    AngularJS by Example,AngularJS Web Application Development Cookbook,Apress.Pro.AngularJS.

    angularJs权威和精通angularjs

    里面有精通angularjs权威指南和精通angularjs两本书的pdf,我从两本书中学到很多开发技术,希望大家也能从中获取很多。

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第027讲 AngularJS 弹性盒模型+bootStrap 开发微信菜单前端之根据微信SDK文档部署数据.mp4 ├最新AngularJS开发宝典—第028讲 弹性盒模型+bootStrap 开发微信菜单前端之根据菜单类型控制...

    AngularJS 示例

    AngularJS有着诸多特性,最为核心的是:MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 ...

    AngularJS 官方下载包 1.2.25 稳定版本

    这个我花了很大功夫下载的、是真正完整的、不做任何修改的、直接从官网下载的AngularJS的完整开发包(带文档)。具体的下载来源地址是https://code.angularjs.org/1.2.25/angular-1.2.25.zip。程序员不用太辛苦找...

    (精通AngularJS)Mastering Web Application Development with AngularJS code 源代码

    (精通AngularJS)Mastering Web Application Development with AngularJS code 源代码

    angularJs demo 各种基本用法

    angularJS router filter service diractive

    AngularJS Eclipse 1.2.0 插件下载

    AngularJS Eclipse 插件为Eclipse提供对AngularJS的支持

    精通AngularJS

    其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用...

    angularjs_angularjs_

    angularjs 1.6从0开始环境搭建,路由配置,封装请求,封装指令,注入服务。

    AngularJs权威教程.pdf

    本书是学习 AngularJS 的公认经典,内容全面,讲解通俗,适合各层次的...本书适合各个层次的 AngularJS 开发人员学习,无论是出于工作需要,还是好奇心的驱使,只要你想彻 底理解 AngularJS,本书都会让你满载而归。

    AngularJS+ NodeJS

    AngularJS+ NodeJS

    Responsive Web Design with AngularJS

    Get introduced to the key features of AngularJS and understand its role in responsive design Learn various approaches for responsive web application development Discover practical examples to ...

    AngularJS入门教程02:AngularJS模板

    【AngularJS入门教程02:AngularJS模板】 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。 在此专门从GitHub下载配套工程打包分享给大家。 本集教程地址: ...

Global site tag (gtag.js) - Google Analytics