阐述
有许多的方式构建应用程序的代码,在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 = '这是标题';
});
好了,这就会数据绑定和数据过滤了。