angular框架的面試題集錦

1、angular內置過濾器一共有幾種，分別是那些？

　　date：日期格式化

　　currency：貨幣 

　　uppercase：大寫

　　lowercase：小寫

　　limitTo（限制數組或字符串長度）

　　orderBy（排序）

　　number（格式化數字，加上千位分隔符，並接收參數限定小數點位數）

　　filter（處理一個數組，過濾出含有某個子串的元素）

　　json（格式化 json 對象）

2、angular 核心？

　　AngularJS是為了克服HTML在構建應用上的不足而設計的。 AngularJS有着諸多特性，最為核心的是：

• MVC
• 模塊化
• 自動化雙向數據綁定
• 語義化標簽、依賴注入等等

3、angular的數據綁定采用什么機制？詳述原理

　　angularjs的雙向數據綁定采用臟檢查（dirty-checking）機制。ng只有在指定事件觸發后，才進入 $digest cycle ：
　　- DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )
　　- XHR響應事件 ( $http )
　　- 瀏覽器Location變更事件 ( $location )
　　- Timer事件( $timeout , $interval )
　　- 執行 $digest() 或 $apply()

4、依賴注入(DI)

　　讓我們可以不用自己實例化就能創建依賴對象的方法. 簡單的來說, 依賴是以注入的方式傳遞的. 在Web應用中， Angular讓我們可以通過DI來創建像Controllers和Directives這樣的對象. 我們還可以創建自己的依賴對象, 當我們要實例化它們時, Angular能自動實現注入.

5、解釋下什么是$rootScrope以及和$scope的區別？

　　通俗的說$rootScrope 頁面所有$scope的父親。

　　我們來看下如何產生$rootScope和$scope吧。

　　step1:Angular解析ng-app然后在內存中創建$rootScope。

　　step2:angular回繼續解析，找到{{}}表達式，並解析成變量。

　　step3:接着會解析帶有ng-controller的div然后指向到某個controller函數。這個時候在這個controller函數變成一個$scope對象實例。

6、表達式 {{yourModel}}是如何工作的？

　　它依賴於 $interpolation服務，在初始化頁面html后，它會找到這些表達式，並且進行標記，於是每遇見一個{{}}，則會設置一個$watch。而$interpolation會返回一個帶有上下文參數的函數，最后該函數執行，則算是表達式$parse到那個作用域上。

7、factory 和 service，provider是什么關系？

　　　factory 把 service 的方法和數據放在一個對象里，並返回這個對象；service 通過構造函數方式創建 service，返回一個實例化對象；provider 創建一個可通過 config 配置的 service。

從底層實現上來看，service 調用了 factory，返回其實例；factory 調用了 provider，將其定義的內容放在 $get 中返回。factory 和 service 功能類似，只不過 factory 是普通 function，可以返回任何東西（return 的都可以被訪問，所以那些私有變量怎么寫你懂的）；service 是構造器，可以不返回（綁定到 this 的都可以被訪問）；provider 是加強版 factory，返回一個可配置的 factory。

8、ng-if 跟 ng-show/hide的區別有哪些？

1. ng-if 在后面表達式為 true 的時候才創建這個 dom 節點，ng-show 是初始時就創建了，用 display:block 和 display:none 來控制顯示和不顯示。
2. ng-if 會（隱式地）產生新作用域，ng-switch 、 ng-include 等會動態創建一塊界面的也是如此。

9、ng-repeat迭代數組的時候，如果數組中有相同值，會有什么問題，如何解決？

　　會提示 Duplicates in a repeater are not allowed. 加 track by $index 可解決。當然，也可以 trace by 任何一個普通的值，只要能唯一性標識數組中的每一項即可（建立 dom 和數據之間的關聯）。

 10、AngularJS的數據雙向綁定是怎么實現的？

　　1、每個雙向綁定的元素都有一個watcher
　　2、在某些事件發生的時候，調用digest臟數據檢測。
　　　　這些事件有：表單元素內容變化、Ajax請求響應、點擊按鈕執行的函數等。
　　3、臟數據檢測會檢測rootscope下所有被watcher的元素。
　　　　$digest函數就是臟數據監測

11、angular 的數據綁定采用什么機制？詳述原理。

　　Angular 在 scope 模型上設置了一個監聽隊列，用來監聽數據變化並更新 view 。每次綁定一個東西到 view 上時 AngularJS 就會往 $watch 隊列里插入一條 $watch ，用來檢測它監視的 model 里是否有變化的東西。當瀏覽器接收到可以被 angular context 處理的事件時， $digest 循環就會觸發，遍歷所有的 $watch ，最后更新 dom。

12、單頁應用有哪些優缺點？

　　單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。 瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。因此，對單頁應用來說模塊化的開發和設計顯得相當重要。

• 速度：更好的用戶體驗，讓用戶在web app感受native app的速度和流暢，
• MVC：經典MVC開發模式，前后端各負其責。
• ajax：重前端，業務邏輯全部在本地操作，數據都需要通過AJAX同步、提交。
• 路由：在URL中采用#號來作為當前視圖的地址,改變#號后的參數，頁面並不會重載。

　　單頁Web應用（single page web application，SPA）是當今網站開發技術的弄潮兒，很多傳統網站都在或者已經轉型為單頁Web應用，新的單頁Web應用網站（包括移動平台上的）也如雨后春筍般涌現在人們的面前，如Gmail、Evernote、Trello等。如果你是一名Web開發人員，卻還沒開發過或者甚至是沒有聽說過單頁應用，那你已經Out很久了。
單頁Web應用和前端工程師們息息相關，因為主要的變革發生在瀏覽器端，用到的技術其實還是HTML+CSS+JavaScript，所有的瀏覽器都原生支持，當然有的瀏覽器因為具備一些高級特性，從而使得單頁Web應用的用戶體驗更上一層樓。關於單頁應用的優點和缺點，網上講解的文章有很多，這里就不展開論述了。 單頁Web應用，顧名思義，就是只有一張Web頁面的應用。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，之后所有的操作都在這張頁面上完成，這一切都由JavaScript來控制。因此，單頁Web應用會包含大量的JavaScript代碼，復雜度可想而知，模塊化開發和設計的重要性不言而喻。

　　優點：

1. 分離前后端關注點，前端負責界面顯示，后端負責數據存儲和計算，各司其職，不會把前后端的邏輯混雜在一起；
2. 減輕服務器壓力，服務器只用出數據就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；
3. 同一套后端程序代碼，不用修改就可以用於Web界面、手機、平板等多種客戶端；

　　缺點：

1. SEO問題，現在可以通過Prerender等技術解決一部分；
2. 前進、后退、地址欄等，需要程序進行管理；
3. 書簽，需要程序來提供支持；

13、{ {now | 'yyyy-MM-dd'} } 這種表達式里面，豎線和后面的參數通過什么方式可以自定義？

app.filter('過濾器名稱',function(){
    return function(需要過濾的對象, 過濾器參數1, 過濾器參數2, ...){
        //...做一些事情   
        return 處理后的對象;
    }
}); 

 14、Angular Directive中restrict 中分別可以怎樣設置？scope中@,=,&有什么區別？

　　restrict中可以分別設置:

• A匹配屬性
• E匹配標簽
• C匹配class
• M 匹配注釋

　　在scope中，@,=,&在進行值綁定時分別表示

• @獲取一個設置的字符串，它可以自己設置的也可以使用{{yourModel}}進行綁定的;
• = 雙向綁定，綁定scope上的一些屬性；
• & 用於執行父級scope上的一些表達式，常見我們設置一些需要執行的函數

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>  

 

 15、有哪些措施可以改善Angular 性能

　　使用一次綁定表達式即{{::yourModel}}

　　減少watcher數量

　　在無限滾動加載中避免使用ng-repeat,關於解決方法可以參考這篇文章

　　使用性能測試的小工具去挖掘你的angular性能問題，我們可以使用簡單的console.time()也可以借助開發者工具以及Batarang

16、你認為在Angular中使用jQuery好么？

　　這是一個開放性的問題，盡管網上會有很多這樣的爭論，但是普遍還是認為這並不是一個特別好的嘗試。其實當我們學習Angular的時候，我們應該做到從0去接受angular的思想，數據綁定，使用angular自帶的一些api，合理的路由組織和，寫相關指令和服務等等。angular自帶了很多api可以完全替代掉jQuery中常用的api，我們可以使用angular.element，$http,$timeout,ng-init等。
我們不妨再換個角度，如果業務需求，而對於一個新人（比較熟悉jQuery）的話，或許你引入jQuery可以讓它在解決問題，比如使用插件上有更多的選擇，當然這是通過影響代碼組織來提高工作效率，隨着對於angular理解的深入，在重構時會逐漸摒棄掉當初引入jquery時的一些代碼。
所以我覺得兩種框架說完全不能一起用肯定是錯的，但是我們還是應該盡力去遵循angular的設計。

17、列出至少三種實現不同模塊之間通信方式？　

　　Service

   　　 events,指定綁定的事件

　　使用 $rootScope

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

  　directive 指定屬性進行數據綁定

18、angular中的$http　　

　　$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。

　　我們可以使用內置的$http服務直接同外部進行通信。$http服務只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象。

19、寫controlloer邏輯的時候 你需要注意什么？

　　1.簡化代碼（這個是所有開發人員都要具備的）
　　2.堅決不能操作dom節點 這個時候可能會問 為什么不能啊
　　你的回答是：DOM操作只能出現在指令（directive）中。最不應該出現的位置就是服務（service）中。Angular倡導以測試驅動開發，在service或者controller中出現了DOM操作，那么也就意味着的測試是無法通過的。當然，這只是一點，重要的是使用Angular的其　　中一個好處是啥，那就是雙向數據綁定，這樣就能專注於處理業務邏輯，無需關系一堆堆的DOM操作。如果在Angular的代碼中還到處充斥着各種DOM操作，那為什么不直接使用jquery去開發呢。

20、angular和jquery的區別　

　　angular是基於數據驅動，所以angular適合做數據操作比較繁瑣的項目（這里可以再提一下單頁面應用，如果你不會福利又來了 http://www.zhihu.com/question/20792064）

　　jquery是基於dom驅動，jquery適合做dom操作多的項目

21、闡述下你對mvc和mvvm的理解

　　隨着代碼規模越來越大，切分職責是大勢所趨，還有為了后期維護方便，修改一塊功能不影響其他功能。還有為了復用，因為很多邏輯是一樣的。而MVC只是手段，終極目標是模塊化和復用。

　　在angular中MVVM模式主要分為四部分：

　　　　View：它專注於界面的顯示和渲染，在angular中則是包含一堆聲明式Directive的視圖模板。
　　　　ViewModel：它是View和Model的粘合體，負責View和Model的交互和協作，它負責給View提供顯示的數據，以及提供了View中Command事件操作Model的途徑；在angular中$scope對象充當了這個ViewModel的角色；
　　　　Model：它是與應用程序的業務邏輯相關的數據的封裝載體，它是業務領域的對象，Model並不關心會被如何顯示或操作，所以模型也不會包含任何界面顯示相關的邏輯。在web頁面中，大部分Model都是來自Ajax的服務端返回數據或者是全局的配置對象；而　　　　　　　　　　angular中的service則是封裝和處理這些與Model相關的業務邏輯的場所，這類的業務服務是可以被多個Controller或者其他service復用的領域服務。
　　　　Controller：這並不是MVVM模式的核心元素，但它負責ViewModel對象的初始化，它將組合一個或者多個service來獲取業務領域Model放在ViewModel對象上，使得應用界面在啟動加載的時候達到一種可用的狀態。

　　mvc的界面和邏輯關聯緊密，數據直接從數據庫讀取。mvvm的界面與viewmode是松耦合，界面數據從viewmodel中獲取。所以angularjs更傾向於mvvm

　　mvvm的優點：

　　　　低耦合：View可以獨立於Model變化和修改，同一個ViewModel可以被多個View復用；並且可以做到View和Model的變化互不影響；
　　　　可重用性：可以把一些視圖的邏輯放在ViewModel，讓多個View復用；
　　　　獨立開發：開發人員可以專注與業務邏輯和數據的開發（ViewModemvvmdi計人員可以專注於UI(View)的設計；