【精选】AngularJS 静态模板.pdfVIP

AngularJS 静态模板 Angular模板 现在是时候⽤AngularJS制作动态⽹页了。我们将添加⼀个测试，验证⽤于控制器的代 ，我们将添加这个控制器。 为应⽤程序构造代 有很多⽅式。针对Angular应⽤，我们⿎励使⽤模块-视图-控制器 (MVC)设计模式以解耦代 、分离关注点。考虑到这⼀点，我们使⽤⼩的Angular 以及 JavaScript为我们的应⽤添加模块、视图和控制器组件。 现在下⾯的数据中动态⽣成了三款⼿机的列表： 把⼯作空间重置到第⼆步 git checkout -f step-2 刷新你的浏览器或在线检查这⼀步：Step 2 Live Demo 下⾯列出了第⼀步和第⼆步之间的最重要的区别。你可以在GitHub⾥看到完整的差 异。 视图和模板 在Angular 中，视图是模块透过HTML模板的映射。这意味着每当模块有变化时， Angular会刷新适当的绑定点，随之更新视图。 以下⾯代 为模板，Angular结构化了视图组件： app/index .html: html ng-app=phonecatApp head ... script src=/attachments/image/wk/angularjs/angular.js/scri script src=/attachments/image/wk/angularjs/controllers.js /head ody ng-controller=PhoneListCtrl ul li ng-repeat=phone in phones span{{}}/span p{{phone.snippet}}/p /li /ul / ody /html 我们⽤ng epeat指令和两个Angular表达式替代硬编 的⼿机列表： 在li元素标签上的元素属性ng-repeat=phone in phones是⼀个 Angular转发器指令。该转发器告诉Angular为列表中的每款使⽤元素标签li 作为模板的⼿机创建⼀个li元素。 ⽤花括号包围的表达式 （{{}}和{{phone.snippet}}）将被 替换成表达式的值。 我们已经添加了⼀个新指令，称为ng-controller，它给元素标签body附加了⼀ 个PhoneListCtrl控制器。在这个点上： 在花括号中的表达式 （{{}}和{{phone.snippet}}）表⽰绑 定，在我们的应⽤程序模块中参引它们，它们被设置在我们的 PhoneListCtrl控制器上。 注意：我们已经指定了⼀个[Angular模块] (https://docs.angularj /api/ng/type/angular .Module) 以载⼊使⽤`ng- app=phonecatApp ` ，在那⾥，`phonecatApp`是我们的模块名。该模块将包含 `PhoneListCtrl` 。 模块和控制器 数据模块 （⼀个简单的⼿机数列，以对象字⾯记号法表达）现在在PhoneListCtrl 控制器中实例化了。该控制器只是⼀个构造器函数，需要⼀个$scope参数： app/js/controllers.js: var phonecatApp = angular.module(phonecatApp, []); phonecatApp.controller(PhoneListCtrl, function ($scope) { $scope.phones = [ {name: Nexus S, snippet: Fast just got faster with Nexus S.}, {name: Motorola XOOM? with Wi-Fi, snippet: The Next, Next Generation ta let.}, {name: MOTOROLA XOOM?, snippet: The Next, Next Generation ta let.} ]; }); 在这⾥，我们声明了⼀个控制器，称为PhoneListCtrl，并把它注册到⼀个 AngularJS模块PhonecatApp中。注意，我们的ng-app