阐述
有许多的方式构建应用程序的代码，在Angular的世界里，我们推荐使用Model-View-Controller(MVC)设计模式去解耦代码和分离问题。考虑到这点，让我们使用少量的Angular和JavasScript去添加模型，视图，控制器组件到我们的App。
接下来，我们学习下数据绑定跟过滤。
在Angular里，视图是被投影到HTML模板里的，这样当模型发生变化，Angular将会刷新相应的绑定点、实现视图更新。
视图跟模板：
这个模板的视图组件是由Angular构建的。
<html ng-app="DestApp">
<head>
<meat charset="utf-8" />
<title>Document</title>
<script src="http://libs.useso.com/js/angular.js/1.2.9/angular.js"></script>
<script src="dest.main.js"></script>
</head>
<body ng-controller="destCtrl">
<h1>{{ title }}</h1>
<div ng-repeat="name in nameList | filter:query">
{{ name.message }}
</div>
<input ng-model="query"><!--通过它我们实现交互式数据过滤-->
</body>
</html>我们替换hard-coded列表用ngRepeat directive 和 Angular expressions：
* ng-repeat="name in nameList | filter:query" 属性是一个Angular 的中继器指令，中继器告诉Angular遍历nameList列表使用<div> 标签创建多个html节点。并且绑定到query 输入框实现数据过滤，一旦有任何改变，将直接影响列表的内容。
* 包裹在{{ name.message }} 里的表达式，将会被替换成表达式的值
模型和控制
// 记得保存编码要跟html页面的<meat charset="utf-8" />声明编码统一（UTF-8），不然中文乱码~
var DestApp = angular.module('DestApp', []);
DestApp.controller('destCtrl', function($scope){
$scope.nameList = [
{'message': 'Hello'},
{'message': 'Aey'},
{'message': 'Elon'}
];
$scope.title = '这是标题';
});好了，这就会数据绑定和数据过滤了。
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
