`
openxtiger
  • 浏览: 151711 次
  • 性别: 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();
}

 

 

 

分享到:
评论

相关推荐

    AngularJS书两本

    双向数据绑定是AngularJS的核心特性之一,它使得模型和视图之间的数据同步变得极其简单。依赖注入机制则允许模块之间松散耦合,提高代码的可测试性和可维护性。指令系统扩展了HTML,使我们可以创建自定义的DOM元素和...

    Angularjs 合集 Angularjs 合集

    《AngularJS by Example》这本书通过实例教学,让读者能够快速理解AngularJS的核心概念和实际应用。AngularJS的核心特性包括双向数据绑定、依赖注入、指令系统、过滤器和服务等。例如,双向数据绑定使得视图与模型...

    AngularJS Eclipse 1.2.0 插件下载

    AngularJS Eclipse 1.2.0 插件是专为开发者设计的一款强大的工具,它将AngularJS框架与Eclipse集成,极大地提升了开发AngularJS应用程序的效率。Eclipse是一款广泛使用的开源集成开发环境(IDE),而AngularJS则是一...

    angularJs权威和精通angularjs

    AngularJS,作为一款由Google维护的前端JavaScript框架,自2010年发布以来,一直在Web开发领域占据着重要的地位。它以其强大的双向数据绑定、依赖注入和模块化设计,极大地提高了开发效率,使得构建复杂的单页应用...

    AngularJS学习 chm 文件

    1. **双向数据绑定**:AngularJS 的核心特性之一是双向数据绑定,它使得模型(model)和视图(view)之间的数据保持同步。任何一方的改变都会立即反映到另一方,大大简化了开发者的工作。 2. **指令系统**:AngularJS ...

    AngularJs 1.5.8

    AngularJS 1.5.8 是一个非常重要的版本,它是Google开发的JavaScript框架AngularJS的稳定版本之一。这个框架主要用于构建动态web应用,通过MVC(Model-View-Controller)架构模式来简化前端开发,提供了丰富的特性以...

    AngularJS开发ASP.NET MVC

    AngularJS是由Google推出的一款开源JavaScript框架,它通过提供一系列强大的特性来简化Web应用的开发过程。 - **模块化开发**:支持组件化开发,每个组件可以被封装成独立的模块,便于复用和管理。 - **双向数据...

    angularJs demo 各种基本用法

    指令是AngularJS的一个创新特性,它们扩展了HTML,让DOM元素具备更丰富的行为。常见的内置指令有`ngRepeat`(用于迭代数组并生成DOM元素)、`ngIf`(根据条件显示/隐藏元素)和`ngModel`(实现双向数据绑定)。...

    AngularJS教程之简单应用程序示例

    值得注意的是,AngularJS的版本更新很快,1.2.15版本属于较早的版本,现在可能更多开发者会转向更新的版本,比如Angular(也称为Angular 2及以上版本),它对AngularJS的很多设计理念进行了重构。但AngularJS依旧有...

    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_in_action

    通过实际项目案例,让读者能够亲自动手实践AngularJS的应用开发。 #### 五、核心章节摘要 - **第1章**:“Hello AngularJS”:本章通过一个简单的示例向读者展示了如何创建一个基本的AngularJS应用。这不仅有助于...

    angularJS技术

    AngularJS的核心特性包括数据绑定、依赖注入、指令系统和模块化,这些都是它在Web开发领域中的独特优势。 **1. 数据绑定** AngularJS的一大亮点是双向数据绑定,它能自动同步模型(model)和视图(view)之间的数据。...

    AngularJS 1.2.19&1.3.0

    AngularJS的核心特性包括: 1. 双向数据绑定:AngularJS通过双向数据绑定连接了视图和模型,当模型改变时,视图会自动更新,反之亦然。这大大减少了开发者手动同步视图和模型的工作。 2. 指令系统:AngularJS的...

    angularjs 書籍

    这本书可能会介绍如何在ASP.NET环境中集成AngularJS,以及如何利用AngularJS的特性来改善.NET应用的前端体验。 "AngularJS UI Development.pdf"聚焦于AngularJS的用户界面开发,讲解如何利用AngularJS的模块化和...

    angularjs管理系统框架

    1. **双向数据绑定**:AngularJS 的核心特性之一,允许视图和模型之间保持同步,无需手动操作DOM进行数据更新。 2. **模块化**:AngularJS 应用以模块的形式组织,便于代码管理和重用。在这个后台管理模板中,可能...

    JS AngularJS 学习笔记

    AngularJS的核心特性包括数据绑定、依赖注入、指令系统以及模块化,这些都为创建复杂的单页应用程序提供了便利。 **1. 数据绑定** 数据绑定是AngularJS的核心功能之一,它实现了视图和模型之间的双向同步。这意味...

    AngularJS前端框架特性介绍WORD版

    资源名称:AngularJS前端框架特性介绍 WORD版内容简介:本文档主要讲述的是AngularJS前端框架特性介绍;AngularJS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,...

    AngularJS1.x快速入门

    - **框架**:更全面地规定了应用的结构,提供了更为丰富的功能和服务,比如AngularJS就不仅仅限于DOM操作,还包含了路由、表单验证、依赖注入等高级特性。 #### 二、AngularJS提供的解决方案 AngularJS为前端开发...

Global site tag (gtag.js) - Google Analytics