1.angular 的数据绑定采用什么机制？详述原理
脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。
原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往$watch队列里插入一条$watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest循环就会触发，遍历所有的$watch，最后更新 dom。
举个栗子
<button ng-click='val=val+1'>increase</button>
click 时会产生一次更新的操作（至少触发两次$digest循环）
按下按钮
* 浏览器接收到一个事件，进入到 angular context
* $digest循环开始执行，查询每个$watch是否变化
* 由于监视$scope.val 的$watch报告了变化，因此强制再执行一次$digest循环
* 新的$digest循环未检测到变化
* 浏览器拿回控制器，更新$scope.val 新值对应的 dom
$digest循环的上限是 10 次（超过 10次后抛出一个异常，防止无限循环）。
2.两个平级界面块 a 和 b，如果 a 中触发一个事件，有哪些方式能让 b 知道？详述原理
这个问题换一种说法就是，如何在平级界面模块间进行通信。有两种方法，一种是共用服务，一种是基于事件。
共用服务
在 Angular 中，通过 factory 可以生成一个单例对象，在需要通信的模块 a 和 b 中注入这个对象即可。
基于事件
这个又分两种方式
第一种是借助父 controller。在子 controller 中向父 controller 触发（$emit）一个事件，然后在父 controller 中监听（$on）事件，再广播（$broadcast）给子 controller ，这样通过事件携带的参数，实现了数据经过父 controller，在同级 controller 之间传播,(Angularjs为在scope中为我们提供了冒泡和隧道机制，$broadcast会把事件广播给所有子controller，而$emit则会将事件冒泡传递给父controller，$on则是angularjs的事件注册函数).
第二种是借助$rootScope。每个 Angular 应用默认有一个根作用域$rootScope， 根作用域位于最顶层，从它往下挂着各级作用域。所以，如果子控制器直接使用$rootScope广播和接收事件，那么就可实现同级之间的通信。
3.angular 应用常用哪些路由库，各自的区别是什么？
Angular1.x 中常用 ngRoute 和 ui.router，还有一种为 Angular2 设计的new router（面向组件）。后面那个没在实际项目中用过，就不讲了。
无论是 ngRoute 还是 ui.router，作为框架额外的附加功能，都必须以 模块依赖 的形式被引入。
区别
ngRoute 模块是 Angular 自带的路由模块，而 ui.router 模块是基于 ngRoute模块开发的第三方模块。
ui.router 是基于 state （状态）的， ngRoute 是基于 url 的，ui.router模块具有更强大的功能，主要体现在视图的嵌套方面。
使用 ui.router 能够定义有明确父子关系的路由，并通过 ui-view 指令将子路由模版插入到父路由模板的
中去，从而实现视图嵌套。而在 ngRoute 中不能这样定义，如果同时在父子视图中 使用了
会陷入死循环。
示例
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 的缺点有哪些？
强约束
导致学习成本较高，对前端不友好。
但遵守 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。
不利于 SEO
因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。
一种解决办法是，对于正常用户的访问，服务器响应 AngularJS 应用的内容；对于搜索引擎的访问，则响应专门针对 SEO 的HTML页面。
性能问题
作为 MVVM 框架，因为实现了数据的双向绑定，对于大数组、复杂对象会存在性能问题。
可以用来优化 Angular 应用的性能的办法：
减少监控项（比如对不会变化的数据采用单向绑定）
主动设置索引（指定track by，简单类型默认用自身当索引，对象默认使用$$hashKey，比如改为track by item.id）
降低渲染数据量（比如分页，或者每次取一小部分数据，根据需要再取）
数据扁平化（比如对于树状结构，使用扁平化结构，构建一个 map 和树状数据，对树操作时，由于跟扁平数据同一引用，树状数据变更会同步到原始的扁平数据）
另外，对于Angular1.x ，存在 脏检查 和 模块机制 的问题。
移动端
可尝试 Ionic，但并不完善。
5.解释下什么是$rootScrope以及和$scope的区别？
通俗的说$rootScrope页面所有$scope的父亲。
我们来看下如何产生$rootScope和$scope吧。
* Angular解析ng-app然后在内存中创建$rootScope。
* Angular会继续解析，找到{{}}表达式，并解析成变量。
* 接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。
6. Angular中的digest周期是什么？
每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。
7.不同模块之间通信方式？
* Service
* events,指定绑定的事件
* 使用 $rootScope
* controller之间直接使用$parent,$$childHead等
* directive 指定属性进行数据绑定
8.有哪些措施可以改善Angular 性能
官方提倡的，关闭debug,$compileProvider
myApp.config(function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
});
* 使用一次绑定表达式即{{::yourModel}}
* 减少watcher数量
* 在无限滚动加载中避免使用ng-repeat,关于解决方法可以参考这篇文章
* 使用性能测试的小工具去挖掘你的angular性能问题，我们可以使用简单的console.time()也可以借助开发者工具以及Batarang
console.time("TimerName");
codeconsole.timeEnd("TimerName");
9.如何进行angular的单元测试
我们可以使用karam＋jasmine 进行单元测试,我们通过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 进行开发），在大型项目团队协作时，强语言类型更有利。
组件化，提升开发和维护的效率。
还有 module 支持动态加载，new router，promise的原生支持等等。
迎合未来标准，吸纳其他框架的优点，值得期待，不过同时要学习的东西也更多了（ES next、TS、Rx等）。
网友评论