AngularJS1.x入门

日期:2015-7-17 13:51 | 标签: AngularJS | 阅读:505

这里列举AngularJS的一些核心概念以及核心语法。

module

module具有将一组内聚的业务组件(controller、service、filter、directive…)封装在一起的能力。
angular.module(1,2,3)可以传入三个参数:

  1. name :名称
  2. requires:依赖
  3. configFn:启动配置函数

公开的Api有:

var moduleInstance = {
        _invokeQueue: invokeQueue,
        _runBlocks: runBlocks,
        requires: requires,
        name: name,
        provider: invokeLater('$provide', 'provider'),
        factory: invokeLater('$provide', 'factory'),
        service: invokeLater('$provide', 'service'),
        value: invokeLater('$provide', 'value'),
        constant: invokeLater('$provide', 'constant', 'unshift'),
        animation: invokeLater('$animateProvider', 'register'),
        filter: invokeLater('$filterProvider', 'register'),
        controller: invokeLater('$controllerProvider', 'register'),
        directive: invokeLater('$compileProvider', 'directive'),
        config: config,
        run: function(block) {
                 runBlocks.push(block);
                 return this;
          }
}

$scope的生命周期

创建->链接->更新->销毁(其实并不需要进行处理)

控制器

factory,service ,provide的区别

首先要做的是,了解以下几个属性。

  1. factory
    通过返回一个包含方法和数据的对象来定义一个服务。该方法里可以注入其他服务。
  2. service
    通过构造函数的方式创建服务,引用服务时,持有对象实例。
  3. provide
    最底层的方式,可以使用.config()方法配置,可以在this.$get中进行依赖注入。

directive

这是AngularJS的核心,不用directive,再学AngularJS也枉然。以下是自定义directive需要知道的一些属性。

  1. restrict
    EACM
  2. compile && link
    分别指编译阶段与运行阶段。
  3. transclude
    默认为false,true为保留内部标签不变。与ng-transclude一起使用。
  4. replace
    是否替换原标签。
  5. require
    存在父子关系时使用。
  6. scope
    可用于创建隔离scope,还需要弄懂的几个概念:
    1. scope.$apply():体制外通知更新,可接受一个function作为参数,执行该function并且触发一轮$digest循环。也可不接受任何参数,只是触发一轮$digest循环。第一种形式更好(因为会包含在try...catch中)。
    2. scope.$watch: scope.$apply() >> scope.$digest >> scope.$watch()
    3. scope.$digest:$digest循环不会只运行一次。在当前的一次循环结束后,它会再执行一次循环用来检查是否有models发生了变化。这就是脏检查(Dirty Checking),它用来处理在listener函数被执行时可能引起的model变化。
    4. scope.$parent:访问父级域
    5. 数据绑定
      • =:作用域的属性与父作用域的属性进行双向绑定,最常用的方式;
      • @:作用域的属性与父作用域的属性进行单向绑定,只读取父作用域的值,为String类型;
      • &:把父作用域的属性包装成函数,以函数的方式读写父作用域属性,包装方法是$parse

辅助方法

  1. angular.element
  2. angular.forEach ...
    详情参考: angularjs-api

内置对象

  1. $apply vs vs $digest
  2. $timeout vs $evalAsync,$evalAsync可以理解为更高效的$timeout,可以合并执行

参考: angularjs-$apply-$digest-$timeout-$evalAsync

其他需要理清的概念

  1. ng-bind && {{}}
  2. ng-cloak: 页面加载时防止应用闪烁

Anguar与.Net的渊源

如果你曾是.Net程序员,不妨看看这张图。 Anguar与.Net

进阶

AngularJS动态加载Controller

参考

http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
http://www.ng-newsletter.com/advent2013/#!/day/1
AngularJS Directive 隔离 Scope 数据交互
AngularJS 全局scope与Isolate scope通信
理解Angular中的$apply()以及$digest()

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式