1.angular 的數(shù)據(jù)綁定采用什么機(jī)制导俘？詳述原理

臟檢查機(jī)制暮蹂。

雙向數(shù)據(jù)綁定是 AngularJS 的核心機(jī)制之一甫题。當(dāng) view 中有任何數(shù)據(jù)變化時(shí)巧鸭，會(huì)更新到 model ，當(dāng) model 中數(shù)據(jù)有變化時(shí)凿宾，view 也會(huì)同步更新矾屯，顯然，這需要一個(gè)監(jiān)控初厚。

原理就是件蚕，Angular 在 scope 模型上設(shè)置了一個(gè) 監(jiān)聽隊(duì)列，用來(lái)監(jiān)聽數(shù)據(jù)變化并更新 view 产禾。每次綁定一個(gè)東西到 view 上時(shí) AngularJS 就會(huì)往$watch隊(duì)列里插入一條$watch排作，用來(lái)檢測(cè)它監(jiān)視的 model 里是否有變化的東西。當(dāng)瀏覽器接收到可以被 angular context 處理的事件時(shí)亚情，$digest循環(huán)就會(huì)觸發(fā)纽绍，遍歷所有的$watch，最后更新 dom势似。

舉個(gè)栗子

<button ng-click='val=val+1'>increase</button>

click 時(shí)會(huì)產(chǎn)生一次更新的操作（至少觸發(fā)兩次$digest循環(huán)）

按下按鈕

? ? ? * 瀏覽器接收到一個(gè)事件拌夏，進(jìn)入到 angular context

? ? ? * $digest循環(huán)開始執(zhí)行，查詢每個(gè)$watch是否變化

? ? ? ?* 由于監(jiān)視$scope.val 的$watch報(bào)告了變化履因，因此強(qiáng)制再執(zhí)行一次$digest循環(huán)

? ? ? ?* 新的$digest循環(huán)未檢測(cè)到變化

? ? ? ? * 瀏覽器拿回控制器障簿，更新$scope.val 新值對(duì)應(yīng)的 dom

$digest循環(huán)的上限是 10 次（超過(guò) 10次后拋出一個(gè)異常，防止無(wú)限循環(huán)）栅迄。

2.兩個(gè)平級(jí)界面塊 a 和 b站故，如果 a 中觸發(fā)一個(gè)事件，有哪些方式能讓 b 知道毅舆？詳述原理

這個(gè)問(wèn)題換一種說(shuō)法就是西篓，如何在平級(jí)界面模塊間進(jìn)行通信。有兩種方法憋活，一種是共用服務(wù)岂津，一種是基于事件。

共用服務(wù)

在 Angular 中悦即，通過(guò) factory 可以生成一個(gè)單例對(duì)象吮成，在需要通信的模塊 a 和 b 中注入這個(gè)對(duì)象即可。

基于事件

這個(gè)又分兩種方式

第一種是借助父 controller辜梳。在子 controller 中向父 controller 觸發(fā)（$emit）一個(gè)事件粱甫，然后在父 controller 中監(jiān)聽（$on）事件，再?gòu)V播（$broadcast）給子 controller 作瞄，這樣通過(guò)事件攜帶的參數(shù)茶宵，實(shí)現(xiàn)了數(shù)據(jù)經(jīng)過(guò)父 controller，在同級(jí) controller 之間傳播,(Angularjs為在scope中為我們提供了冒泡和隧道機(jī)制宗挥，$broadcast會(huì)把事件廣播給所有子controller乌庶，而$emit則會(huì)將事件冒泡傳遞給父controller叶摄，$on則是angularjs的事件注冊(cè)函數(shù)).

第二種是借助$rootScope。每個(gè) Angular 應(yīng)用默認(rèn)有一個(gè)根作用域$rootScope安拟， 根作用域位于最頂層，從它往下掛著各級(jí)作用域宵喂。所以糠赦，如果子控制器直接使用$rootScope廣播和接收事件，那么就可實(shí)現(xiàn)同級(jí)之間的通信锅棕。

3.angular 應(yīng)用常用哪些路由庫(kù)拙泽，各自的區(qū)別是什么？

Angular1.x 中常用 ngRoute 和 ui.router裸燎，還有一種為 Angular2 設(shè)計(jì)的new router（面向組件）顾瞻。后面那個(gè)沒(méi)在實(shí)際項(xiàng)目中用過(guò)，就不講了德绿。

無(wú)論是 ngRoute 還是 ui.router荷荤，作為框架額外的附加功能，都必須以 模塊依賴 的形式被引入移稳。

區(qū)別

ngRoute 模塊是 Angular 自帶的路由模塊蕴纳，而 ui.router 模塊是基于 ngRoute模塊開發(fā)的第三方模塊。

ui.router 是基于 state （狀態(tài)）的个粱， ngRoute 是基于 url 的古毛，ui.router模塊具有更強(qiáng)大的功能，主要體現(xiàn)在視圖的嵌套方面都许。

使用 ui.router 能夠定義有明確父子關(guān)系的路由稻薇，并通過(guò) ui-view 指令將子路由模版插入到父路由模板的

中去，從而實(shí)現(xiàn)視圖嵌套胶征。而在 ngRoute 中不能這樣定義塞椎，如果同時(shí)在父子視圖中 使用了

會(huì)陷入死循環(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 的缺點(diǎn)有哪些睛低？

強(qiáng)約束

導(dǎo)致學(xué)習(xí)成本較高忱屑，對(duì)前端不友好。

但遵守 AngularJS 的約定時(shí)暇昂，生產(chǎn)力會(huì)很高莺戒，對(duì) Java 程序員友好。

不利于 SEO

因?yàn)樗袃?nèi)容都是動(dòng)態(tài)獲取并渲染生成的急波，搜索引擎沒(méi)法爬取从铲。

一種解決辦法是，對(duì)于正常用戶的訪問(wèn)澄暮，服務(wù)器響應(yīng) AngularJS 應(yīng)用的內(nèi)容名段；對(duì)于搜索引擎的訪問(wèn)阱扬，則響應(yīng)專門針對(duì) SEO 的HTML頁(yè)面。

性能問(wèn)題

作為 MVVM 框架伸辟，因?yàn)閷?shí)現(xiàn)了數(shù)據(jù)的雙向綁定麻惶，對(duì)于大數(shù)組、復(fù)雜對(duì)象會(huì)存在性能問(wèn)題信夫。

可以用來(lái)優(yōu)化 Angular 應(yīng)用的性能的辦法：

減少監(jiān)控項(xiàng)（比如對(duì)不會(huì)變化的數(shù)據(jù)采用單向綁定）

主動(dòng)設(shè)置索引（指定track by窃蹋，簡(jiǎn)單類型默認(rèn)用自身當(dāng)索引，對(duì)象默認(rèn)使用$$hashKey静稻，比如改為track by item.id）

降低渲染數(shù)據(jù)量（比如分頁(yè)警没，或者每次取一小部分?jǐn)?shù)據(jù)，根據(jù)需要再日裢濉）

數(shù)據(jù)扁平化（比如對(duì)于樹狀結(jié)構(gòu)杀迹，使用扁平化結(jié)構(gòu)，構(gòu)建一個(gè) map 和樹狀數(shù)據(jù)押搪，對(duì)樹操作時(shí)树酪，由于跟扁平數(shù)據(jù)同一引用，樹狀數(shù)據(jù)變更會(huì)同步到原始的扁平數(shù)據(jù)）

另外大州，對(duì)于Angular1.x 嗅回，存在 臟檢查 和 模塊機(jī)制 的問(wèn)題。

移動(dòng)端

可嘗試 Ionic摧茴，但并不完善绵载。

5.解釋下什么是$rootScrope以及和$scope的區(qū)別？

通俗的說(shuō)$rootScrope頁(yè)面所有$scope的父親苛白。

我們來(lái)看下如何產(chǎn)生$rootScope和$scope吧娃豹。

? ? ?* ?Angular解析ng-app然后在內(nèi)存中創(chuàng)建$rootScope。

? ? ?* Angular會(huì)繼續(xù)解析购裙，找到{{}}表達(dá)式懂版，并解析成變量。

? ? ?* 接著會(huì)解析帶有ng-controller的div然后指向到某個(gè)controller函數(shù)躏率。這個(gè)時(shí)候在這個(gè)controller函數(shù)變成一個(gè)$scope對(duì)象實(shí)例躯畴。

6. Angular中的digest周期是什么？

每個(gè)digest周期中薇芝，angular總會(huì)對(duì)比scope上model的值蓬抄，一般digest周期都是自動(dòng)觸發(fā)的，我們也可以使用$apply進(jìn)行手動(dòng)觸發(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ù)量

? * 在無(wú)限滾動(dòng)加載中避免使用ng-repeat,關(guān)于解決方法可以參考這篇文章

? * 使用性能測(cè)試的小工具去挖掘你的angular性能問(wèn)題，我們可以使用簡(jiǎn)單的console.time()也可以借助開發(fā)者工具以及Batarang

console.time("TimerName");

codeconsole.timeEnd("TimerName");

9.如何進(jìn)行angular的單元測(cè)試

? ?我們可以使用karam＋jasmine 進(jìn)行單元測(cè)試,我們通過(guò)ngMock引入angular app然后自行添加我們的測(cè)試用例阅爽。一段簡(jiǎn)單的測(cè)試代碼：

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的改動(dòng)很大，幾乎算是一個(gè)全新的框架付翁。

基于 TypeScript（可以使用 TypeScript 進(jìn)行開發(fā)）简肴，在大型項(xiàng)目團(tuán)隊(duì)協(xié)作時(shí)，強(qiáng)語(yǔ)言類型更有利百侧。

組件化砰识，提升開發(fā)和維護(hù)的效率。

還有 module 支持動(dòng)態(tài)加載移层，new router，promise的原生支持等等赫粥。

迎合未來(lái)標(biāo)準(zhǔn)观话，吸納其他框架的優(yōu)點(diǎn)，值得期待越平，不過(guò)同時(shí)要學(xué)習(xí)的東西也更多了（ES next频蛔、TS、Rx等）秦叛。