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模塊中定義的類，由組件和指令使用，用來發出自定義事件。