设为首页 加入收藏

TOP

AngularJS开发指南3:Angular主要组成部分以及如何协同工作(二)
2015-02-02 14:09:22 来源: 作者: 【 】 浏览:57
Tags:AngularJS 开发指南 Angular 主要 组成部分 以及 如何 协同 工作
,这些模板的基础是字符串。
AngularJS - AngularJS和其它模板系统不同。它使用的是DOM而不是字符串。模板仍然是用HTML字符串写的,并且它仍然是HTML。浏览器将它解析成DOM, 然后这个DOM会作为输入传递给模板引擎,也就是我们的编译器。编译器查看其中的指令,找到的指令后,会开始监视指令内容中相应的模型。 这样做,就使得视图能“连续地”更新,不需要模板和数据的重新合并。你的模型也就成了你视图变化的唯一原因。


指令


一个指令 就是一种“由某个属性、元素名称、css类名出现而导致的行为,或者说是DOM的变化”。指令能让你以一种声明式的方法来扩展HTML表示能力。


Filters过滤器


过滤器扮演着数据翻译的角色。一般他们主要用在数据需要格式化为本地格式的时候。它参照了UNIX过滤的规则,并且也实现了“|”(管道)语法。


模块和注入器


每个AngularJS应用都有一个唯一的注入器。注入器提供一个通过名字查找对象实例的方法。它将所有对象缓存在内部,所以如果重复调用同一名称的对象,每次调用都会得到同一个实例。如果调用的对象不存在,那么注入器就会让实例的工厂(instance factory)函数创建一个新的实例。


一个模块就是一种配置注入器的实例的工厂函数的方式,我们也称它为“提供者(provider)”。


var myModule = angular.module('myModule', [])


myModule.factory('serviceA', function() {? ? ? //定义serviceA的工厂函数,myModule模块就是提供serviceA实例的工厂函数的提供者
?  return {


  ......
  };
});


// create an injector and configure it from 'myModule'
var $injector = angular.injector('myModule');


// retrieve an object from the injector by name
var serviceA = $injector.get('serviceA');? ? ? //从注入器查找serviceA对象,这时注入器会让实例serviceA的工厂函数factory创建一个新的实例serviceA返回


// always true because of instance cache
$injector.get('serviceA') === $injector.get('serviceA');


注入器真正强大之处在于让方法和类型能够通过注入器,请求到他们依赖的组件,而不需要自己加载依赖。


我们看看下面动态时间的这个例子:


?




?
? ? <script src="http://code.angularjs.org/angular-1.1.0.min.js">
? ? <script">
? ?   angular.module('timeExampleModule', []).
?       factory('time', function($timeout) {
? ?        var time = {};
? ?       (function tick() {
? ? ?       time.now = new Date().toString();
? ? ?       $timeout(tick, 1000);
? ?       })();
? ?       return time;
?      });
    function ClockCtrl($scope, time) {
?      $scope.time = time;
    }
? ?
?
?
? ?


? ? ? Current time is: {{ time.now }}
? ?

?
? ?


你只要把需要的依赖写在函数参数里。当AngularJS调用这个函数时,它会自动填充好需要的参数。这个例子中,当ng-controller实例化构造器ClockCtrl的时候,它自动提供了指明的依赖time实例对象。


AngularJS 命名空间


为了防止意外的命名冲突, AngularJS为可能冲突的对象名加以前缀"$"。所以请不要在你自己的代码里用"$"做前缀,以免和AngularJS代码发生冲突。


希望你喜欢,并分享我的工作~带你走近AngularJS系列


首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇AngularJS开发指南2:AngularJS初.. 下一篇AngularJS开发指南4:指令的详解

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: