1.angular 的數(shù)據(jù)綁定采用什么機制？詳述原理
臟檢查機制。
雙向數(shù)據(jù)綁定是 AngularJS 的核心機制之一。當(dāng) view 中有任何數(shù)據(jù)變化時，會更新到 model ，當(dāng) model 中數(shù)據(jù)有變化時，view 也會同步更新，顯然，這需要一個監(jiān)控。
原理就是，Angular 在 scope 模型上設(shè)置了一個 監(jiān)聽隊列，用來監(jiān)聽數(shù)據(jù)變化并更新 view 。每次綁定一個東西到 view 上時 AngularJS 就會往$watch隊列里插入一條$watch，用來檢測它監(jiān)視的 model 里是否有變化的東西。當(dāng)瀏覽器接收到可以被 angular context 處理的事件時，$digest循環(huán)就會觸發(fā)，遍歷所有的$watch，最后更新 dom。
舉個栗子
<button ng-click='val=val+1'>increase</button>
click 時會產(chǎn)生一次更新的操作（至少觸發(fā)兩次$digest循環(huán)）
按下按鈕
? ? ? * 瀏覽器接收到一個事件，進(jìn)入到 angular context
? ? ? * $digest循環(huán)開始執(zhí)行，查詢每個$watch是否變化
? ? ? ?* 由于監(jiān)視$scope.val 的$watch報告了變化，因此強制再執(zhí)行一次$digest循環(huán)
? ? ? ?* 新的$digest循環(huán)未檢測到變化
? ? ? ? * 瀏覽器拿回控制器，更新$scope.val 新值對應(yīng)的 dom
$digest循環(huán)的上限是 10 次（超過 10次后拋出一個異常，防止無限循環(huán)）。
2.兩個平級界面塊 a 和 b，如果 a 中觸發(fā)一個事件，有哪些方式能讓 b 知道？詳述原理
這個問題換一種說法就是，如何在平級界面模塊間進(jìn)行通信。有兩種方法，一種是共用服務(wù)，一種是基于事件。
共用服務(wù)
在 Angular 中，通過 factory 可以生成一個單例對象，在需要通信的模塊 a 和 b 中注入這個對象即可。
基于事件
這個又分兩種方式
第一種是借助父 controller。在子 controller 中向父 controller 觸發(fā)（$emit）一個事件，然后在父 controller 中監(jiān)聽（$on）事件，再廣播（$broadcast）給子 controller ，這樣通過事件攜帶的參數(shù)，實現(xiàn)了數(shù)據(jù)經(jīng)過父 controller，在同級 controller 之間傳播,(Angularjs為在scope中為我們提供了冒泡和隧道機制，$broadcast會把事件廣播給所有子controller，而$emit則會將事件冒泡傳遞給父controller，$on則是angularjs的事件注冊函數(shù)).
第二種是借助$rootScope。每個 Angular 應(yīng)用默認(rèn)有一個根作用域$rootScope， 根作用域位于最頂層，從它往下掛著各級作用域。所以，如果子控制器直接使用$rootScope廣播和接收事件，那么就可實現(xiàn)同級之間的通信。
3.angular 應(yīng)用常用哪些路由庫，各自的區(qū)別是什么？
Angular1.x 中常用 ngRoute 和 ui.router，還有一種為 Angular2 設(shè)計的new router（面向組件）。后面那個沒在實際項目中用過，就不講了。
無論是 ngRoute 還是 ui.router，作為框架額外的附加功能，都必須以 模塊依賴 的形式被引入。
區(qū)別
ngRoute 模塊是 Angular 自帶的路由模塊，而 ui.router 模塊是基于 ngRoute模塊開發(fā)的第三方模塊。
ui.router 是基于 state （狀態(tài)）的， ngRoute 是基于 url 的，ui.router模塊具有更強大的功能，主要體現(xiàn)在視圖的嵌套方面。
使用 ui.router 能夠定義有明確父子關(guān)系的路由，并通過 ui-view 指令將子路由模版插入到父路由模板的
中去，從而實現(xiàn)視圖嵌套。而在 ngRoute 中不能這樣定義，如果同時在父子視圖中 使用了
會陷入死循環(huán)。
示例
ngRoute
var app = angular.module('ngRouteApp', ['ngRoute']);
app.config(function($routeProvider){
? ? ? ? ? $routeProvider
? ? ? ? ? ? ? ? ? ?.when('/main', {
? ? ? ? ? ? ? ? ? ? ? ? ?templateUrl: "main.html",
? ? ? ? ? ? ? ? ? ? ? ? ? controller: 'MainCtrl'
})
.otherwise({ redirectTo: '/tabs' });
ui.router
var app = angular.module("uiRouteApp", ["ui.router"]);
app.config(function($urlRouterProvider, $stateProvider){
? ? ? ? ? ? $urlRouterProvider.otherwise("/index");
? ? ? ? ? ? $stateProvider
? ? ? ? ? ? ? ? ? ? ? .state("Main", {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? url: "/main",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? templateUrl: "main.html",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? controller: 'MainCtrl'
? ? ? ? ? ? ? ? ? ? ? ? ?})
4.angular 的缺點有哪些？
強約束
導(dǎo)致學(xué)習(xí)成本較高，對前端不友好。
但遵守 AngularJS 的約定時，生產(chǎn)力會很高，對 Java 程序員友好。
不利于 SEO
因為所有內(nèi)容都是動態(tài)獲取并渲染生成的，搜索引擎沒法爬取。
一種解決辦法是，對于正常用戶的訪問，服務(wù)器響應(yīng) AngularJS 應(yīng)用的內(nèi)容；對于搜索引擎的訪問，則響應(yīng)專門針對 SEO 的HTML頁面。
性能問題
作為 MVVM 框架，因為實現(xiàn)了數(shù)據(jù)的雙向綁定，對于大數(shù)組、復(fù)雜對象會存在性能問題。
可以用來優(yōu)化 Angular 應(yīng)用的性能的辦法：
減少監(jiān)控項（比如對不會變化的數(shù)據(jù)采用單向綁定）
主動設(shè)置索引（指定track by，簡單類型默認(rèn)用自身當(dāng)索引，對象默認(rèn)使用$$hashKey，比如改為track by item.id）
降低渲染數(shù)據(jù)量（比如分頁，或者每次取一小部分?jǐn)?shù)據(jù)，根據(jù)需要再?。?/p>
數(shù)據(jù)扁平化（比如對于樹狀結(jié)構(gòu)，使用扁平化結(jié)構(gòu)，構(gòu)建一個 map 和樹狀數(shù)據(jù)，對樹操作時，由于跟扁平數(shù)據(jù)同一引用，樹狀數(shù)據(jù)變更會同步到原始的扁平數(shù)據(jù)）
另外，對于Angular1.x ，存在 臟檢查 和 模塊機制 的問題。
移動端
可嘗試 Ionic，但并不完善。
5.解釋下什么是$rootScrope以及和$scope的區(qū)別？
通俗的說$rootScrope頁面所有$scope的父親。
我們來看下如何產(chǎn)生$rootScope和$scope吧。
? ? ?* ?Angular解析ng-app然后在內(nèi)存中創(chuàng)建$rootScope。
? ? ?* Angular會繼續(xù)解析，找到{{}}表達(dá)式，并解析成變量。
? ? ?* 接著會解析帶有ng-controller的div然后指向到某個controller函數(shù)。這個時候在這個controller函數(shù)變成一個$scope對象實例。
6. Angular中的digest周期是什么？
每個digest周期中，angular總會對比scope上model的值，一般digest周期都是自動觸發(fā)的，我們也可以使用$apply進(jìn)行手動觸發(fā)。
7.不同模塊之間通信方式？
? ? ?* Service
? ? ?* events,指定綁定的事件 ??
? ? ?* 使用 $rootScope
? ? ?* controller之間直接使用$parent,$$childHead等
? ? ?* directive 指定屬性進(jìn)行數(shù)據(jù)綁定
8.有哪些措施可以改善Angular 性能
? ? ?官方提倡的，關(guān)閉debug,$compileProvider
myApp.config(function ($compileProvider) {
? ? ? ? ?$compileProvider.debugInfoEnabled(false);
? ?});
? * 使用一次綁定表達(dá)式即{{::yourModel}}
? * 減少watcher數(shù)量
? * 在無限滾動加載中避免使用ng-repeat,關(guān)于解決方法可以參考這篇文章
? * 使用性能測試的小工具去挖掘你的angular性能問題，我們可以使用簡單的console.time()也可以借助開發(fā)者工具以及Batarang
console.time("TimerName");
codeconsole.timeEnd("TimerName");
9.如何進(jìn)行angular的單元測試
? ?我們可以使用karam＋jasmine 進(jìn)行單元測試,我們通過ngMock引入angular app然后自行添加我們的測試用例。一段簡單的測試代碼：
describe('calculator', function () {
? ? ? ?beforeEach(module('calculatorApp'));
? ? ? ?var $controller;
? ? ? ?beforeEach(inject(function(_$controller_){
? ? ? ? ? ? ?$controller = _$controller_;
? ? ? ? ?}));
? ? ? ? describe('sum', function () {
? ? ? ? ? ? ? ? ? ? it('1 + 1 should equal 2', function () {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var $scope = {};
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var controller = $controller('CalculatorController', { $scope: $scope });
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $scope.x = 1;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$scope.y = 2;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $scope.sum();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? expect($scope.z).toBe(3);
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
});
10.如何看待angular2
相比 Angular1.x，Angular2的改動很大，幾乎算是一個全新的框架。
基于 TypeScript（可以使用 TypeScript 進(jìn)行開發(fā)），在大型項目團(tuán)隊協(xié)作時，強語言類型更有利。
組件化，提升開發(fā)和維護(hù)的效率。
還有 module 支持動態(tài)加載，new router，promise的原生支持等等。
迎合未來標(biāo)準(zhǔn)，吸納其他框架的優(yōu)點，值得期待，不過同時要學(xué)習(xí)的東西也更多了（ES next、TS、Rx等）。
