AngularJS入门教程(二):AngularJS模板
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试。
一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。
请重置工作目录:
gitcheckout-fstep-2
我们的应用现在有了一个包含三部手机的列表。
步骤1和步骤2之间最重要的不同在下面列出。你可以到GitHub去看完整的差别。
视图和模板
在AngularJS中,一个视图是模型通过HTML**模板**渲染之后的映射。这意味着,不论模型什么时候发生变化,AngularJS会实时更新结合点,随之更新视图。
比如,视图组件被AngularJS用下面这个模板构建出来:
<htmlng-app> <head> ... <scriptsrc="lib/angular/angular.js"></script> <scriptsrc="js/controllers.js"></script> </head> <bodyng-controller="PhoneListCtrl">
<ul> <ling-repeat="phoneinphones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body> </html>