理解Angular的模板功能
模板功能，是Angular的最核心的功能之一。
本节通过velocity模板与angular的模板功能对比，来说明angular的模板功能是如何工作的。传统的velocity服务端模板工作流程如下：
step:1 Template 模板
#用来标识Velocity的脚本语句$用来标识一个对象(或理解为变量)
$data.title
- #foreach($name in $data.names)
- $name #end
step:2 Model 数据
$变量的实际值存在服务器的 Model 中，这些数据结合#表示的velocity语法规则，在服务端转变成HTML也就是View 视图
var data = { "title": "分类信息网站", "names": [ "58同城", "赶集网" ]}; step:3 View 视图
在传统的服务端模板中，Template 模板和 Model 数据 组装成 View 视图 的过程发生在服务端，然后再把生成的HTML页面发送到游览器中。
分类信息网站
- 58同城
- 赶集网
Angular的模板的功能：
step:1 Template 模板
用
ng-appng-controllerng-repeat等标签属性表示Angular语法，官方术语叫做指令用
{ {}}表示变量ng-repeat相当于velocity中的#foreach；ng-app告诉Angular应该接页面中的哪一块，一般写在<html>标签中，让Angular接管整个页面；ng-controller每个页面可能会有几个controller，它的作用是告诉Angular模板的对应的Angular数据由哪部分代码管理。
{ {data.title}}
- { {name}}
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 视图。
分类信息网站
- 58同城
- 赶集网
Angular与velocity极其的相识，其功能都将Template 模板 和 Model 数据组装起来，输出成View 视图。其主要的不同在于，Angular的组装过程发生在游览器中，而velocity组装过程发生在服务器中。
我们可以通过下表将Angular模板功能和velocity进行一个简单对比。
| 对比 | Angular | velocity |
|---|---|---|
| 模板语法 | 指令 | #开头的脚本语句 |
| 模板变量 | { {}} | $开头的模板变量 |
| 数据 | $scope.data | 模拟的data对象 |
| 工作原理 | 模板+数据=视图 | 模板+数据=视图 |
| 模板类型 | 客户端模板 | 服务端模板 |
Angular的路由功能及其原理
路由功能的实现原理
在单页面应用中，View 视图会根据用户的操作进行切换，在传统页面中，视图的切换意味着页面跳转，用户会通过游览器中的后退，前进按钮来进行操作。而这正是单页面应用中，需要的功能。实现原理如下：
点击某个按钮或链接
使用hash修改地址栏
加载相应视图
点击前进/后退
地址栏变化触发hashchange事件
监听到相应事件，加载对应视图
如此一来，便形成了通过地址栏进行导航的深度链接，也就是我们所需要的路由机制。通过路由机制，一个单页应用的各个视图就可以很好的组织起来了。
html:
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:引入依赖
需要注意的是，以上文件的版本要一致，1.2.x的angular不能引用1.4.x版本的angular-ruote文件。
step2:编写模板
ng-view当前路由把对应的视图模板载入到该<div>中。type="text/ng-template"表明<script>标签中存的是Angular的模板文本。href="#/"Angular所控制的hash路径
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;})