1.ngRoute模塊的使用
使用步驟：
(1)創建index.html，引入css/js，聲明ngView
(2)創建模板頁面
(3)創建模塊，配置路由字典
module.config(function($routeProvider){
$routeProvider.
when('/start', {templateUrl: 'xxx.html'})
})
(4)測試： http://IP/index.html#/start
2.ngAnimate模塊的使用
Angular本身沒有提供任何動畫效果，但ngAnimate模塊提供了一些“動畫鈎子(hooks)”，可以鈎住用戶自定義JS(jQuery.animate())、Transition、Keyframes動畫效果。
ngAnimate模塊為下述指令提供的動畫鈎子：ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass。
演示：使用ngAnimate提供的動畫鈎子調用自定義的Transition動畫效果。
(1)引入angular.js、angular-animate.js
(2)自定義模塊聲明依賴ngAnimate模塊，相關指令就會自動生成動畫鈎子
(3)針對動畫鈎子編寫Transition動畫
/*要離開的元素動畫開始時的樣式*/
.page.ng-leave {
left: 0;
opacity: 1;
}
/*要離開的元素動畫結束時的樣式*/
.page.ng-leave.ng-leave-active {
left: -100%;
opacity: 0;
}
/*要進入的元素動畫開始時的樣式*/
.page.ng-enter {
left: 100%;
opacity: 0;
}
/*要進入的元素動畫結束時的樣式*/
.page.ng-enter.ng-enter-active {
left: 0;
opacity: 1;
}
3.AngularJS階段項目
day01:
am：完成基本頁面切換效果
pm：每個模板頁面的靜態內容
提高：仿“餓了么”的樣式實現Bootstrap定制
day02：
am：完成后台PHP頁面
pm：發起AJAX請求，呈現動態數據
4.補充：如何實現頁面包含
項目中，習慣把多個頁面中完全一樣的內容，單獨提取出來作為一個獨立的文件(如header.html、footer.html)，凡是需要此文件的頁面，引入該頁面即可。頁面包含可以采用多種方案：
(1)利用Web服務器的SSI命令：客戶端請求一個頁面，服務器一次返回多個頁面——需要修改Web服務器配置文件。
(2)使用服務器端動態語言提供的頁面包含函數：如PHP:
include('header.php');
....echo '主體';
include('footer.php');
客戶端請求一個頁面，服務器返回多個PHP頁面組合后的一個頁面。
(3)在客戶端使用AJAX技術：先加載一個頁面的主體內容，加載完成后，再去請求header.html、footer.html放到空容器中
<div id="header"></div>
<main>XXXXXXXX</main>
<div id="footer"></div>
-----------------------------------------
$.ready(function(){
$('#header').load('header.html');
$('#footer').load('footer.html');
})
提示：AngularJS中ng模塊提供了一個指令：ngInclude，已經實現了方法3。
<div ng-include=" 'tpl/header.html' "></div>
| 面試題：說出下面幾段代碼運行后的效果： |
|
| View： <p>{{count}}</p> Controller: $scope.count=0; setInterval(function(){ $scope.count++; }, 1000) |
View： <p>{{count}}</p> Controller: $scope.count=0; $interval(function(){ $scope.count++; }, 1000) |
| View： <p>{{count}}</p> Controller: $scope.count=0; setInterval(function(){ $scope.count++; $scope.$digest( ); }, 1000) |
View： <p>{{count}}</p> Controller: $scope.count=0; setInterval(function(){ $scope.count++; $scope.$apply( ); }, 1000) |
| View： <p>COUNT1: {{count1}}</p> <p>COUNT2: {{count2}}</p> Controller: $scope.count1=0; $scope.count2=0;
setInterval(function(){ $scope.count1++; }, 1000) $interval(function(){ $scope.count2++; }, 1000) |
View： <p>COUNT1: {{count1}}</p> <p>COUNT2: {{count2}}</p> Controller: $scope.count1=0; $scope.count2=0;
setInterval(function(){ $scope.count1++; }, 1000) $interval(function(){ //$scope.count2++; }, 1000) |