Google AngularJS是一個JS框架，適用於以數據操作為主的SPA應用。所有的操作都是以數據為出發點。四大特性：
(1)MVC模型
Model：即業務數據 $scope.xx $rootScope.xx
View：即業務數據的呈現 HTML + ngXxx
Controller：負責操作業務數據 .controller('', function(){})
(2)雙向數據綁定
方向1：Model綁定到View，只要Model變View隨着變
方向2：View(表單控件)綁定到Model，只要View變Model隨着變
(3)依賴注入
(4)模塊化設計
| 面試題：AngularJS的最大的不足/應用時需要特別關注的地方？ 原生ES/JS/DOM只有特定HTML元素的特定事件的監聽機制，沒有監聽數據/對象/值改變的機制。
|
| $interval和window.setInterval()的區別？ $interval修改的任何Model數據，底層會立即遍歷一遍$digest隊列； setInterval()即使修改了Model數據，也不會遍歷$digest隊列； |
| $interval(function(){ $scope.count++; }, 1000) 等價於 setInterval(function(){ $scope.count++; $digetst()/$apply(); }, 1000) |
2.依賴注入
Dependency：若某個函數調用時需要其它的對象作為形參，就此函數依賴於形參對象。
function Driver( car ){ //司機依賴於一個car對象
car.start();
car.run();
car.stop();
}
如何解決依賴關系：
(1)主動創建方式
var c1 = new Car(); //主動創建依賴對象
var d1 = new Driver( c1 ); //傳遞依賴對象
(2)被動注入(Injection)方式
module.controller('控制器', function($scope, $interval){})
Angular中的ngController指令在實例化控制器對象時，會根據指定的形參名，創建出控制器所依賴的對象，並注入給控制器對象——依賴注入（Dependency Injection，DI）現象。
注意：
(1)Angular在創建控制器對象時，會根據形參列表中的每個形參的名稱來創建依賴的對象，故控制器聲明函數不能聲明Angular無法識別的形參名——Angular只提供了這一種依賴注入方式——根據形參名來注入依賴的對象！
(2)若項目JS文件使用了類似yuicompressor等壓縮程序，默認會把函數的形參名精簡為一個字母的形式，會導致Angular的依賴注入失敗！解決辦法：
module.controller('控制器名', [
'$scope',
'$interval',
'$http',
function(aaa,bbb,ccc){}
])
["num1", 'num2', 'num3', function add(n1, n2,n3){}]
var num1=10;
var num2=20;
var num5=50;
var num3=30
add(10, 20, 30);
3.可以被注入的對象——所有的service/provider對象都可以被注入
(1)$rootScope：在多個控制器間共享數據的服務
(2)$interval：提供周期性定時器服務
(3)$timeout：
(4)$log：提供五個基本的日志輸出服務
(5)$http：提供異步HTTP請求（AJAX）服務
用法： $http({method:'GET', url:'/xx.php'}).
success(fn).
error(fn);
簡化版： $http.get('url').success(fn);
$http.post('url', data).success(fn);
(6)$location
4.ng模塊中提供的過濾器(filter)
Filter: 把Model數據在顯示時以某種特定的格式呈現。
(1)lowercase
語法： {{ 表達式 | lowercase }}
(2)uppercase
語法： {{ 表達式 | uppercase }}
(3)number
語法： {{ 表達式 | number }}
{{ 表達式 | number : 小數位數 }}
(3)currency
語法： {{ 表達式 | currency }}
{{ 表達式 | currency : '貨幣符號' }}
(3)date
語法： {{ 表達式 | date }} 默認格式： Sep 1, 2015
{{ 表達式 | date : '日期時間格式'}}
5.Web項目中多頁應用和單頁應用的比較
Mutiple Page Application
Single Page Application
| 多頁應用 |
單頁應用(SPA) |
| 項目中有多個完整的HTML頁面 |
整個項目中只有一個完整的HTML頁面；其它HTML文件都是HTML片段 |
| 使用超鏈接、JS實現頁面跳轉 |
使用超鏈接、JS實現“偽跳轉” |
| 所有的頁面請求都是同步的——客戶端在等待服務器給響應的時候，瀏覽器中時一片空白 |
所有的“偽頁面請求”都是異步請求——客戶端在等待下一個頁面片段到來時，仍可以顯示前一個頁面內容——瀏覽體驗更好 |
| 不便於實現兩個頁面間切換過場動畫 |
很容易實現兩個偽頁面間的過場切換動畫 |
| 瀏覽器需要不停的創建完整的DOM樹、刪除完整的DOM樹 |
瀏覽器只需要創建一個完整的DOM樹，此后的偽頁面切換其實只是在換某個div中的內容。 |
| 每個頁面都需要加載自己的CSS和JS文件 |
整個項目的CSS和JS文件只需要加載一次 |
手動實現單頁應用的步驟：
(1)創建一個完整的HTML頁面（如index.html)，引入所需要的所有CSS和JS；body中只需要一個偽頁面的容器元素，如<div></div>
(2)創建若干個偽HTML頁面/模板頁面：只需要聲明HTML片段
(3)客戶端請求完整的HTML頁面，同時URL中再追加一個特殊的標記，如http://127.0.0.1/index.html#/start——指定要加載的偽頁面的名稱
(4)瀏覽器解析出偽頁面名稱，查找一個字典，找到該名稱對應的模板頁面的URL
window.location.hash
#/start => template/start.html
#/m => template/main.html
#/detail => template/productdetail.html
(5)客戶端發起異步的AJAX請求，獲取模板頁面的內容，加載到index.html的偽頁面容器中即可
6.AngularJS提供的模塊——ngRoute
Route：路由，通過某條線路找到目標內容。
ngRoute模塊的用途：就是根據瀏覽器中URL中的一個特殊的地址標記(形如#/xxx)，查找到該標記所對應的模板頁面，並異步加載到當前頁面的ngView指令中。使用步驟：
(1)創建唯一完整的HTML頁面，其中聲明一個容器，ngView指令。引入angular.js和angular-route.js
(2)創建多個模板頁面(習慣上放在一個特別的目錄下，如tpl)
(3)創建Module，聲明依賴於ng和ngRoute兩個模塊。
(4)在Module中配置路由字典。
(5)使用瀏覽器做測試：
http://IP地址/index.html#/路由地址
7.ngRoute模塊中的偽頁面跳轉
(1)通過超鏈接跳轉
<a href="#/路由地址"> #不能省
(2)通過JS跳轉
<button ng-click="jump()"></button>
$scope.jump = function(){
//location.href="2.html" 不能使用多頁面應用中的跳轉
$location.path('/路由地址'); //#不能有
}