理解Angular的模板功能
模板功能,是Angular的最核心的功能之一。
本节通过velocity模板与angular的模板功能对比,来说明angular的模板功能是如何工作的。
传统的velocity服务端模板工作流程如下:
step:1 Template 模板
#
用来标识Velocity的脚本语句$
用来标识一个对象(或理解为变量)
<h1>$data.title</h1>
<ul>
#foreach($name in $data.names)
<li>$name</li>
#end
</ul>
step:2 Model 数据
$
变量的实际值存在服务器的 Model 中,这些数据结合#
表示的velocity语法规则,在服务端转变成HTML也就是View 视图
var data = {
"title": "分类信息网站",
"names": [
"58同城",
"赶集网"
]
};
step:3 View 视图
在传统的服务端模板中,Template 模板和 Model 数据 组装成 View 视图 的过程发生在服务端,然后再把生成的HTML页面发送到游览器中。
<h1>分类信息网站</h1>
<ul>
<li>58同城</li>
<li>赶集网</ul>
</ul>
Angular的模板的功能:
step:1 Template 模板
用
ng-app
ng-controller
ng-repeat
等标签属性表示Angular语法,官方术语叫做指令
用
{{}}
表示变量ng-repeat
相当于velocity中的#foreach
;ng-app
告诉Angular应该接页面中的哪一块,一般写在<html>
标签中,让Angular接管整个页面;ng-controller
每个页面可能会有几个controller
,它的作用是告诉Angular模板的对应的Angular数据由哪部分代码管理。
<html ng-app="web">
<body ng-controller="mainController">
<h1>{{data.title}}</h1>
<ul>
<li ng-repeat="name in data.names">{{name}}</li>
</ul>
</body>
</html>
step:2 Model 数据
$scope.data
就相当于 上面velocity中模拟的data
对象angular.module('web',[])
对应的是模板中ng-app="web"
;controller('mainController',fn)
对应的是模板中的<body ng-controller="mainController">
。 表明$scope.data
的作用域仅适用于<body>
中的Angular模板。
angular.module('web', [])
.controller('mainController', function($scope){
$scope.data = {
"title": "分类信息网站",
"names": [
"58同城",
"赶集网"
]
};
});
step:3 View 视图
在游览器中,Angular将Template 模板和Model 数据组装起来了,输出最终的HTML页面,也就是View 视图。
<h1>分类信息网站</h1>
<ul>
<li>58同城</li>
<li>赶集网</ul>
</ul>
Angular与velocity极其的相识,其功能都将Template 模板 和 Model 数据组装起来,输出成View 视图。其主要的不同在于,Angular的组装过程发生在游览器中,而velocity组装过程发生在服务器中。
我们可以通过下表将Angular模板功能和velocity进行一个简单对比。
对比 | Angular | velocity |
---|---|---|
模板语法 | 指令 | # 开头的脚本语句 |
模板变量 | {{}} | $ 开头的模板变量 |
数据 | $scope.data | 模拟的data对象 |
工作原理 | 模板+数据=视图 | 模板+数据=视图 |
模板类型 | 客户端模板 | 服务端模板 |
Angular的路由功能及其原理
路由功能的实现原理
在单页面应用中,View 视图会根据用户的操作进行切换,在传统页面中,视图的切换意味着页面跳转,用户会通过游览器中的后退,前进按钮来进行操作。而这正是单页面应用中,需要的功能。实现原理如下:
点击某个按钮或链接
使用hash修改地址栏
加载相应视图
点击前进/后退
地址栏变化触发hashchange事件
监听到相应事件,加载对应视图
如此一来,便形成了通过地址栏进行导航的深度链接,也就是我们所需要的路由机制。通过路由机制,一个单页应用的各个视图就可以很好的组织起来了。
html:
<div id="btns">
<input type="button" value="a">
<input type="button" value="b">
<input type="button" value="c">
</div>
<div id="page" style="display: none;">
<p>我是页面<span></span></p>
</div>
js:
// 每次按钮点击的时候改变hash值。
$('input').click(function(event) {
var hash = $(this).val();
document.location.hash = '/' + hash;
});
// 用户点击游览器回退\前进或点击按钮都会引起hash值的改变。
// 当hash值改变时,改变 View 视图。
$(window).on('hashchange', function(e){
var hash = document.location.hash.replace(/#\//,'');
if (/(a|b|c)/.test(hash) ) {
$('#page span').text(hash);
$('#page').show();
$('#btns').hide();
} else {
$('#page').hide();
$('#btns').show();
}
});
Angular的路由功能
step1:引入依赖
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var app = angular.module('web', ['ngRoute']) //引入route模块,有点类似于require.js的引入
// ...
</script>
需要注意的是,以上文件的版本要一致,1.2.x的angular不能引用1.4.x版本的angular-ruote文件。
step2:编写模板
ng-view
当前路由把对应的视图模板载入到该<div>
中。type="text/ng-template"
表明<script>
标签中存的是Angular的模板文本。href="#/"
Angular所控制的hash路径
<div ng-view="" ></div>
<script type="text/ng-template" id="list.html">
<div id="btns" ng-controller="listContr">
<a ng-repeat="item in list" href="#/{{item}}" ><div>{{item}}</div></a>
</div>
</script>
<script type="text/ng-template" id="item.html">
<div id="page" ng-controller="itemContr">
<p>我是页面<span>{{item}}</span></p>
</div>
</script>
step3:定义路由表
为了给应用配置路由,需要使用configAPI,通过$routeProvider.whenAPI\otherwiseAPI来定义的路由规则。
当URL为
/
时,AngularJS会使用listContr
控制器和list
模板当URL为
/:item
时,这里的:item
是变量,AngularJS会使用itemContr
控制器和item.html
模板。otherwise
`redirectTo表示,非以上路由,对页面进行重定向到
/`页面。
app.config(function($routeProvider){
$routeProvider.
when('/', {
controller: 'listContr', // 默认为全部职位
templateUrl: 'list'
}).
when('/:item',{ // 筛选职位
controller: 'itemContr',
templateUrl: 'item'
}).
otherwise({
redirectTo: '/'
});
});
step4:编写Controller
$routeParams
对应的是路由的参数.
app.controller('listContr', function($scope){
$scope.list = ['a','b','c'];
}).
controller('itemContr', function($scope, $routeParams){
$scope.item = $routeParams.item;
})