angular框架的面試題集錦

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

　　date：日期格式化

　　currency：貨幣 

　　uppercase：大寫

　　lowercase：小寫

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

　　orderBy（排序）

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

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

　　json（格式化 json 對象）

二、angular 核心？

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

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

三、angular的數據綁定採用什麼機制？詳述原理

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

四、依賴注入(DI)

　　讓咱們能夠不用本身實例化就能建立依賴對象的方法. 簡單的來講, 依賴是以注入的方式傳遞的. 在Web應用中， Angular讓咱們能夠經過DI來建立像Controllers和Directives這樣的對象. 咱們還能夠建立本身的依賴對象, 當咱們要實例化它們時, Angular能自動實現注入.

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

　　通俗的說$rootScrope 頁面全部$scope的父親。

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

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

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

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

六、表達式 {{yourModel}}是如何工做的？

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

七、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。

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

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

九、ng-repeat迭代數組的時候，若是數組中有相同值，會有什麼問題，如何解決？

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

 十、AngularJS的數據雙向綁定是怎麼實現的？

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

十一、angular 的數據綁定採用什麼機制？詳述原理。

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

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

　　單頁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. 書籤，須要程序來提供支持；

1三、{ {now | 'yyyy-MM-dd'} } 這種表達式裏面，豎線和後面的參數經過什麼方式能夠自定義？

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

 1四、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> 

 

 1五、有哪些措施能夠改善Angular 性能

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

　　減小watcher數量

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

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

1六、你認爲在Angular中使用jQuery好麼？

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

1七、列出至少三種實現不一樣模塊之間通訊方式？　

　　Service

   　　 events,指定綁定的事件

　　使用 $rootScope

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

  　directive 指定屬性進行數據綁定

1八、angular中的$http　　

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

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

1九、寫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操做多的項目

2一、闡述下你對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)的設計；