AngularJs concepts详解及示例代码(3)

3.由于Controller不知道自己需要对应哪一个View,使得一个Controller可以(间接)使用多个View。这对于re-skinning(更换皮肤?)、其他设备特定的视图(例如手机与桌面)还有代码的可测性是很重要的。 

六、Model

AngularJs concepts详解及示例代码

  Model,可以理解为数据对象。它被用作与模版结合,以产生视图。为了将model写入到视图中,model必须被scope所引用。与很多其他框架不一样,angular对model没有任何限制与要求。不需要额外添加class,也不需要通过特殊的特权方法去访问或者改变model。Model的数据类型,可以是原始的类型(string、number……),可以是键值对象({a:1,b:2}),也可以是函数(function() {…})。简要地说,angular的model只需要是一个普通的javascript对象。

七、View

  view是用户所能看到的东西。view诞生于模版。它与model结合,最终呈现为浏览器DOM。Angular采取一个对于其他很多模版系统来说,很不一样的方式去呈现View。

AngularJs concepts详解及示例代码

其他模版引擎:很多模版引擎,是通过建立带有特殊标记的HTML字符串来实现的。通常这些模版标记破坏了HTML的语法,这意味着不能通过一般的HTML编辑器去编辑代码(这个嘛…)。模版字符串传入模版引擎,与数据合并。最终生成HTML字符串。这些字符串一般通过.innerHTML的方式写入DOM中,促使浏览器呈现模版内容。当数据发生改变时,这个过程需要一次又一次地重复。模版的粒度与DOM更新的粒度一致。这粒的关键,是模版系统处理字符串。

Angular:Angular模版的不同之处,在于它是基于DOM的而不是基于字符串的。模版依然需要在HTML中写入一些字符串,但依旧是HTML(不是通过在里面嵌入模版)。浏览器把HTML转换为DOM,然后DOM成为了compiler(angular的模版引擎)的输入。Compiler查找directives,依次在model中设置watches。得出的结果,是一个一直更新的view,不需要重新拼接model与template。model成为了view的唯一数据来源(single source of truth)。

 八、Directives

  Directive是一个行为(例如之前文章的例子“躲猫猫”)或DOM转换(自定义标签,里面包含一组DOM),将其名称放在属性、标签名、class名里面都可以触发该directive。Directive允许你以声明的方式扩展HTML的标签。

  下面的例子,还有一些疑问。就是$render如何触发@_@

<!DOCTYPE HTML> <html lang="zh-cn" ng-app="myDirective"> <head> <meta charset="UTF-8"> <title>directive</title> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body ng-controller="MyCtrl"> <div ng-model="content" contenteditable="true">My Little Dada</div> <pre>modelValue = {{content}}</pre> <button ng-click="reset()">reset(change model)</button> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> angular.module("myDirective",[]) .directive("contenteditable",function() { return { require:'ngModel', link:function (scope, element, attr, ngModel) { function setVal() { ngModel.$setViewValue(element.text()); } // veiw -> model element.bind("keyup",function() { scope.$apply(setVal); }); // model -> view ngModel.$render = function(val) { console.log("render running"); element.html(val); }; //init setVal(); } } } ).controller("MyCtrl",function($scope) { $scope.reset = function() { $scope.content = "My Little Dada"; }; }); </script> </body> </html>

九、Filters

  Filters 扮演一个数据转换(格式化)的角色。通常他们是与地域有关的,不同地域也许会有不同的输出格式。他们在追随了Unix过滤器的精神与类似的语法:|  (pipe)

<!DOCTYPE HTML> <html lang="zh-cn" ng-app> <head> <meta charset="UTF-8"> <title>filter</title> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body> <div ng-init="list = ['百度B','搜狗S','360','3SB']"> 数字格式化: 1233211234567 -> {{1233211234567|number}}<br/> 数组过滤,然后通过json格式输出: <input ng-model="myFilterText" type="text"/><br/> {{list|filter:myFilterText|json}}<br/> </div> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> </body> </html>

 十、Modules and the Injector

AngularJs concepts详解及示例代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfdyz.html