Angular面试题

1. ng-show/ng-hide 与 ng-if的区别？

咱们都知道ng-show/ng-hide其实是经过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。所以若是咱们是根据不一样的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show. 这是由于多余的节点和里面的img图片都彻底不须要加载。 

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

通俗的说rootScrope页面全部scope的父亲。

咱们来看下如何产生rootScope和scope吧。

step1:Angular解析ng-app而后在内存中建立$rootScope。

step2:angular回继续解析，找到{{}}表达式，并解析成变量。

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()?

var customTimeout = $timeout(function () {   // your code }, 1000);   $timeout.cancel(customTimeout);

 

// .$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中@,=,&有什么区别？

A匹配属性

E匹配标签

C匹配class

M 匹配注释

固然你能够设置多个值好比AEC,进行多个匹配。 

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

@获取一个设置的字符串，它能够本身设置的也可使用{{yourModel}}进行绑定的;

= 双向绑定，绑定scope上的一些属性；

& 用于执行父级scope上的一些表达式，常见咱们设置一些须要执行的函数

7. 列出至少三种实现不一样模块之间通讯方式？

Service、Factory服务

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");

//your code

console.timeEnd("TimerName"); 

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

若是业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可让它在解决问题，好比使用插件上有更多的选择，固然这是经过影响代码组织来提升工做效率，随着对于angular理解的深刻，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。(😂Po主就是这样的人，但愿不要被嘲笑，业务倒是赶着走)

因此我以为两种框架说彻底不能一块儿用确定是错的，可是咱们仍是应该尽力去遵循angular的设计

10. 如何进行angular的单元测试

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

Angular 2组件/指令具备生命周期事件，是由@angular/core管理的。@angular/core会建立组件，渲染它，建立并呈现它的后代。当@angular/core的数据绑定属性更改时，处理就会更改，在从DOM中删除其模板以前，就会销毁掉它。Angular提供了一组生命周期hooks（特殊事件），能够被分接到生命周期中，并在须要时执行操做。构造函数会在全部生命周期事件以前执行。每一个接口都有一个前缀为ng的hook方法。例如，ngOnint界面的OnInit方法，这个方法必须在组件中实现。

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

ngOnChanges：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。

 ngOnInit：在第一个ngOnChange触发器以后，初始化组件/指令。这是最经常使用的方法，用于从后端服务检索模板的数据。

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

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

 

组件特定hooks：

l  ngAfterContentInit：组件内容已初始化完成

l  ngAfterContentChecked：在Angular检查投影到其视图中的绑定的外部内容以后。

l  ngAfterViewInit：Angular建立组件的视图后。

l  ngAfterViewChecked：在Angular检查组件视图的绑定以后。

2、使用Angular 2，和使用Angular 1相比，有什么优点？

一、Angular 2是一个平台，不只是一种语言

二、更好的速度和性能

三、更简单的依赖注入

四、一、模块化，跨平台

五、具有ES6和Typescript的好处。

六、灵活的路由，具有延迟加载功能

七、更容易学习

什么是事件发射器？它是如何在Angular 2中工做的？

Angular 2不具备双向digest cycle，这是与Angular 1不一样的。在Angular2中，组件中发生的任何改变老是从当前组件传播到其全部子组件中。若是一个子组件的更改须要反映到其父组件的层次结构中，咱们能够经过使用事件发射器api来发出事件。

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