angularJs的理解

angularJs的理解

發佈時間:2016年06月21日 評論數：搶沙發 閱讀數：2

第三方 插件angular-ui 還有谷歌扁平化庫 material.angular

angularJS 優缺點：

模板功能強大 ，自帶豐富的angular指令 一個完善的MV*框架 ，包含模板 雙向綁定 ，路由，模塊化，服務，過濾器，依賴注入等功能 ，自定義指令

缺點:ngView只能有一個，不能嵌套多個視圖

內容網站，須要SEO的解決方案

交互頻繁的，如遊戲之類交互體驗網站。

angular彙總

① 構建SPA （單一頁面應用程序） single page APP

PJax原理 SPA 實現原理

1 ，點擊a標籤連接 使用錨點修改地址欄 或者用HTML5 的 histroy API pushState方法將當前的url添加到歷史記錄中

2 ，ajax請求加載相應視圖 替換原來的視圖

3 ，點擊後退或前進 地址欄發生變化 監聽hashchange事件 或監聽popstate事件 加載相應視圖

url地址 能夠經過window.location拿到全部url的信息

優勢：spa（單頁面應用）

一、用戶體驗好、快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染。

二、基於上面一點，SPA相對對服務器壓力小。

缺點：

1： seo 不利於搜索引擎優化

3：前進、後退、地址欄等，須要程序進行管理；

② AngularJS的工做原理 交互過程主要由幾個循環組成

1. 運行原理 AngularJS等待DOMContentLoaded事件的觸發；angularJS尋找ng-app指令中指定的模塊配置$injector (注射器)，它是一個IOC容器/控制反轉。$injector建立$compile服務和$rootScope。 使用$compile服務編譯DOM並把它連接到$rootScope上

2 。事件循環 首先 瀏覽器一直處於監聽狀態，一旦有事發生，就會被加到一個 event queue 中，event queue 中的事件會一個一個執行

AngularJS）的上下文中進行調用。AngularJS會在包含做用域apply()方法內調用指令。Angular在rootScope上啓動$digest循環時開始整個過程的

而後AngularJS會進入到由兩個小循環組成的digest循環中 一個是用來處理evalAsync隊列 一個是處理watch列表 digest循環會一直迭代知道evalAsync隊列爲空而且$watch列表也爲空的時候，即model再也不有任何變化。

一旦AngularJS的$digest循環結束，整個執行就會離開AngularJS和Javascript的context，緊接着瀏覽器就會把數據改變後的視圖從新渲染出來。

$digest循環中

$watch列表 是一些表達式的集合，一旦有改變發生，那麼$watch函數就會被調用

$evalAsync 用來schedule一些須要在渲染視圖以前處理的操做 經過setTimeout(0)實現，速度會比較慢，可能會出現視圖抖動的問題

angular 的數據綁定採用什麼機制？詳述原理 髒檢查機制。

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

$digest 循環的上限是 10 次（超過 10次後拋出一個異常，防止無限循環）。

1. ng-if跟ng-show/hide的區別有哪些？

ng-if 在後面表達式爲 true 的時候才建立這個 dom 節點，ng-show 是初始時就建立了，用 display:block 和 display:none 來控制顯示和不顯示。

ng-if 會（隱式地）產生新做用域，ng-switch 、 ng-include 等會動態建立一塊界面的也是如此。

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

會提示 不容許複製. 加 track by $index 可解決 增長惟一性標識數組中的每一項便可

3. ng-click中寫的表達式，能使用JS原生對象上的方法，好比Math.max之類的嗎？爲何？

不能夠。只要是在頁面中，就不能直接調用原生的 JS 方法，由於這些並不存在於與頁面對應的 Controller 的 $scope 中。

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

ng 內置的 filter 有九種：

date（日期）currency（貨幣）limitTo（限制數組或字符串長度）orderBy（排序）lowercase（小寫）uppercase（大寫）number（格式化數字，加上千位分隔符，並接收參數限定小數點位數）filter（處理一個數組，過濾出含有某個子串的元素）json（格式化 json 對象）

filter 有兩種使用方法，一種是直接在頁面裏：另外一種是在 js 裏面用：自定義 filter

5. factory和service，provider是什麼關係？

1 factory 把 service 的方法和數據放在一個對象裏，並返回這個對象

簡單講factory 是普通function 能夠返回任何東西

2 service 經過構造函數方式建立 service，返回一個實例化對象

service 是構造器，能夠不返回 綁定到 this 的均可以被訪問

3 provider 建立一個可經過 config 配置的 service。

6. 兩個平級界面塊a和b，若是a中觸發一個事件，有哪些方式能讓b知道，詳述原理；

在 Angular 中，經過 factory 能夠生成一個單例對象，在須要通訊的模塊 a 和 b 中注入這個對象便可。

第二種是藉助 $rootScope， 每一個 Angular 應用默認有一個根做用域 $rootScope

7. angular應用經常使用哪些路由庫，各自的區別是什麼？

ui.router 是基於 state （狀態）的， ngRoute 是基於 url 的，ui.router模塊具備更強大的功能，主要體如今視圖的嵌套方面。

8. angular的缺點有哪些？

a. 強約束 致使學習成本較高

b. 不利於 SEO 內容都是動態獲取並渲染生成的，搜索引擎無法爬取。

c. 性能問題 雙向綁定，對於大數組、複雜對象會存在性能問題。

9. angular的優化？

減 少監控項

主動設置索引（

下降渲染數據量（好比分頁，或者每次取一小部分數據，根據須要再取）

數據扁平化

d. 移動端

10. 詳述angular的「依賴注入」

AngularJS 是經過構造函數的參數名字來推斷依賴服務名稱的，經過 toString() 來找到這個定義的 function 對應的字符串，而後用正則解析出其中的參數（依賴項），再去依賴映射中取到對應的依賴，實例化以後傳入。

由於 AngularJS 的 injector 是假設函數的參數名就是依賴的名字，而後去查找依賴項，那若是像下面這樣簡單注入依賴，代碼壓縮後（參數被重命名了），就沒法查找到依賴項了。

function myCtrl = ($scope, $http){ ... }

數組註釋法：

myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http){ ... }])

異步請求之$http對象

一、GET請求，請求的數據會附加在URL以後，以?分割URL和傳輸數據，多個參數用&鏈接。URL的編碼格式採用的是ASCII編碼，而不是uniclde，便是說全部的非ASCII字符都要編碼以後再傳輸。

POST請求：POST請求會把請求的數據放置在HTTP請求包的包體中。上面的item=bandsaw就是實際的傳輸數據。

所以，GET請求的數據會暴露在地址欄中，而POST請求則不會。

若是你是POST請求，params裏的數據會幫你拼到url後面，data裏的數據會放到請求體中。

$interval註冊的匿名函數不會在元素被移除時自動釋放，存在必定的內存泄露風險

element.on('$destroy', function() {$interval.cancel(timeoutId);});

angular $http 跨域請求的時 默認提供異步請求對象不支持自定義回調函數名，

angular隨機分配的回調函數名稱不被接口支持

angular中把全部jsonp的callback都掛在angular.callbacks這個對象上

解決方法 自定義一個服務 把$document

1掛載回調函數到全局下 2，將要傳的參數轉換成URl字符串的形式 3，處理url中的回調函數 4，建立一個script標籤 5，將script標籤放到頁面中 最後起須要調用$apply方法

加載動畫在狀態中加入 ng-show=‘login’ 在scope中添加個flase狀態 加載完成後改爲true 使用第三方須要 調用$scope.$apply()方法