# Angular相关面试题
## 1. ng-show/ng-hide 与 ng-if的区别？
1. ng-show/ng-hide实际上是通过display来进行隐藏和显示的。2. 而ng-if实际上控制dom节点的增删除来实现的。
3. 因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.

## 2.解释下什么是$rootScrope以及和$scope的区别？
通俗的说$rootScrope 页面所有$scope的父亲。

我们来看下如何产生$rootScope和$scope吧。
1. step1:Angular解析ng-app然后在内存中创建$rootScope。
2. step2:angular回继续解析，找到{}表达式，并解析成变量。
3. step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

## 3. 表达式 {{yourModel}}是如何工作的？
它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个作用域上。

## 4. Angular中的digest周期是什么？
每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。

## 5. 如何取消 $timeout, 以及停止一个$watch()?
停止 $timeout我们可以用cancel：
```js
var customTimeout = $timeout(function () {  
  // your code
}, 1000);
 
$timeout.cancel(customTimeout);
停掉一个$watch：

// .$watch() 会返回一个停止注册的函数
function that we store to a variable  
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {  
  if (newVal) {
    // we invoke that deregistration function, to disable the watch
    deregisterWatchFn();
    ...
  }
});
```
## 6. Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？
restrict中可以分别设置:

A匹配属性
E匹配标签
C匹配class
M 匹配注释
当然你可以设置多个值比如AEC,进行多个匹配。

在scope中，@,=,&在进行值绑定时分别表示

@获取一个设置的字符串，它可以自己设置的也可以使用{{yourModel}}进行绑定的;
= 双向绑定，绑定scope上的一些属性；
& 用于执行父级scope上的一些表达式，常见我们设置一些需要执行的函数
```js
angular.module('docsIsolationExample', [])  
.controller('Controller', ['$scope', function($scope) {
  $scope.alertName = function() {
      alert('directive scope &');
  }
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      clickHandle: '&'
    },
    template: '<button ng-click="testClick()">Click Me</button>',
    controller: function($scope) {
 
      $scope.testClick = function() {
        $scope.clickHandle();
 
      }  
    }
  };
});
<div ng-app="docsIsolationExample">  
<div ng-controller="Controller">  
  <my-customer click-handle="alertName()"></my-customer>
</div>  
 </div>
 ```
## 7. 列出至少三种实现不同模块之间通信方式？
Service

events,指定绑定的事件

使用 $rootScope

controller之间直接使用$parent, $$childHead等

directive 指定属性进行数据绑定

## 8. 有哪些措施可以改善Angular 性能
> [!NOTE]
> 官方提倡的，关闭debug,$compileProvider

1. 使用一次绑定表达式即{{yourModel}}
2. 减少watcher数量
3. 在无限滚动加载中避免使用ng-repeat
4. 使用性能测试的小工具去挖掘你的angular性能问题，我们可以使用简单的console.time()也可以借助开发者工具以及Batarang

```js
myApp.config(function ($compileProvider) {  
  $compileProvider.debugInfoEnabled(false);
});

console.time("TimerName");  
//your code
console.timeEnd("TimerName");  
```


## 9. 你认为在Angular中使用jQuery好么？
1. angular自带了很多api可以完全替代掉jQuery中常用的api，我们可以使用angular.element，$http,$timeout,ng-init等。

2. 我们不妨再换个角度，如果业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可以让它在解决问题，比如使用插件上有更多的选择，当然这是通过影响代码组织来提高工作效率，随着对于angular理解的深入，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。

3. 所以我觉得两种框架说完全不能一起用肯定是错的，但是我们还是应该尽力去遵循angular的设计。

## 10. 如何进行angular的单元测试
> [!NOTE]
> 我们可以使用karam＋jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。 一段简单的测试代码：

```js
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);
        });    
    });
 
});
```


## 11.  请解释Angular 2应用程序的生命周期hooks是什么？
1. Angular 2组件/指令具有生命周期事件。是由@angular/core管理的。

2. @angular/core会创建组件。渲染它。创建并呈现它的后代。当@angular/core的数据绑定属性更改时，处理就会更改，在从DOM中删除其模板之前，就会销毁掉它。Angular提供了一组生命周期hooks（特殊事件）。能够被分接到生命周期中，并在须要时执行操作。

3. 构造函数会在全部生命周期事件之前执行。

4. 每一个接口都有一个前缀为ng的hook方法。比如，ngOnint界面的OnInit方法，这种方法必须在组件中实现。 

5. 一部分事件适用于组件/指令，而少数事件仅仅适用于组件。

- ngOnChanges：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。
- ngOnInit：在第一个ngOnChange触发器之后，初始化组件/指令。
这是最经常使用的方法。用于从后端服务检索模板的数据。

- ngDoCheck：检測并在Angular上下文发生变化时执行。
每次更改检測执行时，会被调用。

- ngOnDestroy：在Angular销毁指令/组件之前清除。取消订阅可观察的对象并脱离事件处理程序，以避免内存泄漏。

组件特定hooks：

- ngAfterContentInit：组件内容已初始化完毕
- ngAfterContentChecked：在Angular检查投影到其视图中的绑定的外部内容之后。
- ngAfterViewInit：Angular创建组件的视图后。
- ngAfterViewChecked：在Angular检查组件视图的绑定之后。
 
## 12.  使用Angular 2，和使用Angular 1相比。有什么优势？
1. Angular 2是一个平台，不仅是一种语言
2. 更好的速度和性能
3. 更简单的依赖注入
4. 模块化。跨平台
5. 具备ES6和Typescript的优点。
6. 灵活的路由，具备延迟载入功能
7. 更easy学习
 
## 13.  Angular 2中的路由工作原理是什么？
> 路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由，并提供了在模块级（延迟载入）下配置和定义的灵活性。 

1. Angular应用程序具有路由器服务的单个实例。而且每当URL改变时。对应的路由就与路由配置数组进行匹配。在成功匹配时，它会应用重定向，此时路由器会构建ActivatedRoute对象的树。同一时候包括路由器的当前状态。在重定向之前，路由器将通过执行保护（CanActivate）来检查是否同意新的状态。

2. Route Guard仅仅是路由器执行来检查路由授权的接口方法。

3. 保护执行后，它将解析路由数据并通过将所需的组件实例化到**router-outlet**中来激活路由器状态。

---
**扩展阅读**
1. https://www.codeproject.com/Articles/1164813/Angular-Routing 
2. https://vsavkin.com/angular-2-router-d9e30599f9ea#.kt4z1v957
 
## 14.  什么是事件发射器？它是怎样在Angular 2中工作的？
1. Angular 2不具有双向digest cycle。这是与Angular 1不同的。

2. 在Angular2中，组件中发生的不论什么改变总是从当前组件传播到其全部子组件中。假设一个子组件的更改须要反映到其父组件的层次结构中，我们能够通过使用事件发射器api来发出事件。

3. 简而言之，EventEmitter是在@ angular/core模块中定义的类。由组件和指令使用。用来发出自己定义事件。

```js
@output() somethingChanged = new EventEmitter();
```

我们使用somethingChanged.emit（value）方法来发出事件。

这通经常使用在setter中，当类中的值被更改完毕时。

能够通过模块的不论什么一个组件，使用订阅方法来实现事件发射的订阅。

```js
myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));
```

---
**扩展阅读**

1. http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter
2. https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.HTML
 
## 15.  怎样在Angular 2应用程序中使用codelyzer？
> 全部企业应用程序都会遵循一组编码惯例和准则。以更好的方式维护代码。Codelyzer是一个开源工具。用于执行和检查是否遵循了提前定义的编码准则。Codelyzer仅对Angular和TypeScript项目进行静态代码分析。

1. Codelyzer执行在tslint的顶部，其编码约定通常在tslint.json文件里定义。Codelyzer能够直接通过Angularcli或npm执行。

2. 像Visual Studio Code和Atom这种编辑器也支持codelyzer，仅仅须要通过做一个主要的设置就能实现。

3. 要在Visual Studio代码中设置codelyzer，我们能够在文件 - >选项 - >用户设置中加入tslint规则的路径。

```js
{

    "tslint.rulesDirectory": "./node_modules/codelyzer",

    "typescript.tsdk": "node_modules/typescript/lib"

}
```

- 从cli中执行的代码：ng lint。

- 从npm中执行的代码： npm run lint

---
**扩展阅读**
1. https://github.com/mgechev/codelyzer
2. https://www.youtube.com/watch?v=bci-Z6nURgE

 
## 16.  什么是延迟载入？怎样在Angular 2中启用延迟载入？
> 大多数企业应用程序包括用各式各样的用于特定业务案例的模块。

1. 捆绑整个应用程序代码并完毕载入，会在初始调用时。产生巨大的性能开销。

2. 延迟载入使我们仅仅载入用户正在交互的模块，而其余的模块会在执行时按需载入。

3. 延迟载入通过将代码拆分成多个包并以按需载入的方式，来加速应用程序初始载入过程。

4. 每一个Angular应用程序必须有一个叫AppModule的主模块。代码应该依据应用程序业务案例分为不同的子模块（NgModule）。

 

启用延迟载入的Plunkr演示样例： 

1. 我们不须要在根模块中导入或声明延迟载入模块。
2. 将路由加入到顶层路由（app.routing.ts）并设置loadChildren。loadChildren会从根目录中获取绝对路3. 径。RouterModule.forRoot（）会获取routes数组并配置路由器。
4. 在子模块中导入模块特定路由。
5. 在子模块路由中，将路径指定为空字符串“”，也就是空路径。
6. RouterModule.forChild会再次採用路由数组为子模块组件载入并配置路由器。
7. 然后，导出const路由：
```js
ModuleWithProviders = RouterModule.forChild（routes）;
```

## 17.  在Angular 2应用中，我们应该注意哪些安全威胁？
> 就像不论什么其他client或Web应用程序一样，Angular 2应用程序也应该遵循一些基本准则来减轻安全风险。

1. 避免为你的组件使用/注入动态HTML内容。
2. 假设使用外部HTML，也就是来自数据库或应用程序之外的地方。那么就须要清理它。
3. 不要将外部网址放在应用程序中，除非它是受信任的。避免网址重定向。除非它是可信的。
4. 考虑使用AOT编译或离线编译。
5. 通过限制api。选择使用已知或安全环境/浏览器的app来防止XSRF攻击。

---
**扩展阅读**
- https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices

 
## 18.  怎样优化Angular 2应用程序来获得更好的性能？
> [!NOTE]
> 优化取决于应用程序的类型和大小以及更多因素。

1. 考虑AOT编译。
2. 确保应用程序已经经过了捆绑。uglify和tree shaking。
3. 确保应用程序不存在不必要的import语句。
4. 确保应用中已经移除了不使用的第三方库。
5. 全部dependencies 和dev-dependencies都是明白分离的。
6. 假设应用程序较大时，我会考虑延迟载入而不是全然捆绑的应用程序。

---
**扩展阅读**
- 1. https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294#.pw4m2srmr
- 2. https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/
 
## 19.  怎样实现不出现编辑器警告的自己定义类型？
> 在大多数的情况下。第三方库都带有它的.d.ts 文件，用于类型定义。

1. 在某些情况下，我们须要通过向现有类型提供一些更多的属性来扩展现有类型，或者假设我们须要定义其他类型以避免TypeScript警告。

2. 假设我们须要扩展外部库的类型定义，一个好的做法是，我们并不是对node_modules或现有的typings目录进行修改，而是创建一个命名为“自己定义类型”的新目录。来存储全部的自己定义类型。

3. 要定义应用程序（JavaScript / Typescript）对象的类型。我们应该在应用程序对应模块的models目录中，定义接口和实体类。

4. 对于这些情况，我们能够通过创建我们自己的“ .d.ts”文件来实现定义或扩展类型。

---
**扩展阅读**
- https://www.typescriptlang.org/docs/handbook/declaration-merging.HTML
- https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files
- http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file
 
## 20. 什么是Shadow DOM？它怎样帮助Angular 2更好地执行？
1. Shadow DOM是HTML规范的一部分。它同意开发者封装自己的HTML标记，CSS样式和JavaScript。

2. Shadow DOM以及其他一些技术，使开发者能够像<audio>标签一样构建自己的一级标签。Web组件和API。总的来说，这些新的标签和API被称为Web组件。Shadow DOM通过提供了更好的关注分离，通过其他的HTML DOM元素实现了更少的样式与脚本的冲突。

3. 由于shadow DOM本质上是静态的。同一时候也是开发者无法訪问的，所以它是一个非常好的候选对象。由于它缓存的DOM将在浏览器中呈现得更快，并提供更好的性能。此外。还能够相对非常好地管理shadow DOM。同一时候检測Angular 2应用的改变，而且能够有效地管理视图的又一次绘制。

---
**扩展阅读**

- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
- https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
- https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966
 
## 21. 什么是AOT编译？它有什么优缺点？
> AOT编译代表的是Ahead Of Time编译，当中Angular编译器在构建时，会将Angular组件和模板编译为本机JavaScript和HTML。编译好的HTML和JavaScript将会部署到Webserver，以便浏览器能够节省编译和渲染时间。

### 21.1 优点

1. 更快的下载：由于应用程序已经编译。很多Angular编译器相关库就不再须要捆绑，应用程序包变得更小，所以该应用程序能够更快地下载。
2. 更少的Http请求数：假设应用程序没有捆绑来支持延迟载入（或不论什么原因），对于每一个关联的HTML和CSS，都会有一个单独的server请求。可是预编译的应用程序会将全部模板和样式与组件对齐，因此到server的Http请求数量会更少。
3. 更快的渲染：假设应用程序不是AOT编译，那么应用程序全然载入时，编译过程会发生在浏览器中。这须要等待下载全部必需的组件。然后等待编译器花费时间来编译应用程序。

4. 在构建时检測错误：由于预先编译，能够检測到很多编译时错误，能够为应用程序提供更好的稳定性。

### 21.2 缺点

1. 仅适用于HTML和CSS，其他文件类型须要前面的构建步骤
2. 没有watch模式。必须手动完毕（bin / ngc-watch.js）并编译全部文件
3. 须要维护AOT版本号的bootstrap文件（使用cli等工具时不须要）
4. 在编译之前，须要清理步骤

---
**扩展阅读**
- https://angular.io/docs/ts/latest/cookbook/aot-compiler.HTML

 
## 22. Observables和Promises的核心差别是什么？

### 22.1 Promise
1. 返回单个值
2. 不可取消

### 22.2 Observables
1. 能够使用多个值
2. 可取消
3. 支持map，filter，reduce和相似的操作符
4. ES 2016提议的功能
5. 使用反应式扩展（RxJS）
6. 依据时间的变化，数组成员能够异步获取

- 参考文章：https://www.cnblogs.com/mfmdaoyou/p/7389012.html

【流行框架】Angular相关

2.解释下什么是$rootScrope以及和$scope的区别？

3. 表达式 {{yourModel}}是如何工作的？

5. 如何取消 $timeout, 以及停止一个$watch()?

6. Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？

7. 列出至少三种实现不同模块之间通信方式？

8. 有哪些措施可以改善Angular 性能

9. 你认为在Angular中使用jQuery好么？

11.  请解释Angular 2应用程序的生命周期hooks是什么？

12.  使用Angular 2，和使用Angular 1相比。有什么优势？

13.  Angular 2中的路由工作原理是什么？

14.  什么是事件发射器？它是怎样在Angular 2中工作的？

15.  怎样在Angular 2应用程序中使用codelyzer？

16.  什么是延迟载入？怎样在Angular 2中启用延迟载入？

17.  在Angular 2应用中，我们应该注意哪些安全威胁？

18.  怎样优化Angular 2应用程序来获得更好的性能？

19.  怎样实现不出现编辑器警告的自己定义类型？

20. 什么是Shadow DOM？它怎样帮助Angular 2更好地执行？

21. 什么是AOT编译？它有什么优缺点？

22. Observables和Promises的核心差别是什么？