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

 

 

 

分享到:
评论

相关推荐

    Google.AngularJS

    这个框架的核心理念是数据绑定和依赖注入,这两大特性极大地简化了前端开发流程,让开发者可以更加专注于业务逻辑,而不是底层的DOM操作。 **1. 数据绑定** AngularJS的数据绑定是其最显著的特点之一,它实现了...

    chatapp:ionic_angularJS聊天项目

    依赖注入(Dependency Injection, DI)是`AngularJS`的核心特性,它简化了代码,提高了可测试性。在`chatapp`中,可能通过DI获取WebSocket服务或Firebase服务来处理消息传递。 ### 5. `AngularJS`路由 `AngularJS`...

    WEB前端简历模板14.doc

    * 对新知识、新的技术充满好奇心,善于探索新内容 * 富有想象力、做事不拘泥俗套,喜欢做一些有挑战性、独创性的工作 * 具有良好的适应性,懂得换位思考,善于发现别人的优缺点,做事能以大局为重 兴趣爱好 * 台球...

    最新2021web前端学习路线分享.docx

    Web前端开发是一个不断更新迭代的领域,随着技术的发展,学习路线也需要不断调整。...总之,Web前端的学习是一个持续的过程,保持对新技术的热情和好奇心,不断学习和实践,才能在这个快速发展的行业中保持竞争力。

    100_MelonConference:Angular JS,Java,Google App Engine

    1. 数据绑定:AngularJS的核心特性之一,它允许将模型数据与视图元素直接关联,实现数据的自动更新。 2. 指令:AngularJS的自定义HTML标签和属性,扩展了HTML的功能,如ng-if、ng-repeat、ng-click等。 3. 服务:...

    Social-Network

    作为软件大学“JS框架与AngularJS”课程的一部分,这个实践项目旨在让学生深入理解和应用JavaScript的核心概念,同时熟悉AngularJS这一流行的前端开发框架。 首先,JavaScript是Web开发中的基础语言,它为网页添加...

    ng-complete-table:另一个 Ng-gridng-table

    在实际开发中,ng-complete-table 通过模块化的设计,使其能够很好地与其他 AngularJS 库集成,如 Angular UI Router、AngularAMD 等。这使得项目构建更加灵活,降低了维护难度。 总的来说,ng-complete-table 作为...

    Concession-Europe-production-management

    2. **前端框架**:考虑到项目复杂性,开发团队可能使用了HTML前端框架,如Bootstrap、AngularJS或ReactJS,来提高开发效率和用户体验。这些框架提供了预设的样式和组件,简化了页面布局和交互设计。 3. **响应式...

Global site tag (gtag.js) - Google Analytics