八、服務

服務是一個物件或函式，對外提供特定的功能。
8.1內建服務
1、$location是對原生Javascript中location物件屬性和方法的封裝。

2、timeout&interval對原生Javascript中的setTimeout和setInterval進行了封裝。

3、$filter在控制器中格式化資料。

4、$log列印除錯資訊

5、$http用於向服務端發起非同步請求。

同時還支援多種快捷方式如http.get()、http.post()、$http.jsonp。
注：各引數含義見程式碼註釋。

8.2自定義服務
通過上面例子得知，所謂服務是將一些通用性的功能邏輯進行封裝方便使用，AngularJS允許將自定義服務。
1、factory方法

3、value方法定義常量

在介紹服務時曾提到服務本質就是一個物件或函式，所以自定義服務就是要返回一個物件或函式以供使用。

九、模組載入

AngularJS模組可以在被載入和執行之前對其自身進行配置。我們可以在應用的載入階段配置不同的邏輯。

9.1配置塊

1、通過config方法實現對模組的配置，AngularJS中的服務大部分都對應一個“provider”，用來執行與對應服務相同的功能或對其進行配置。
比如$log、$http、$location都是內建服務，相對應的“provider”分別是$logProvider、$httpProvider、$

locationPorvider。

下圖以$log為例進行演示，修改了配置

下圖以$filter為例進行演示，實現相同功能

9.2執行塊

服務也是模組形式存在的對且對外提供特定功能，前面學習中都是將服務做為依賴注入進去的，然後再進行呼叫，除了這種方式外我們也可以直接執行相應的服務模組，AngularJS提供了run方法來實現。

不但如此，run方法還是最先執行的，利用這個特點我們可以將一些需要優先執行的功能通過run方法來執行，比如驗證使用者是否登入，未登入則不允許進行任何其它操作。

注：此知識點意在瞭解AngularJS的載入機制。

十、路由

一個應用是由若個檢視組合而成的，根據不同的業務邏輯展示給使用者不同的檢視，路由則是實現這一功能的關鍵。

10.1 SPA

SPA（Single Page
Application）指的是通單一頁面展示所有功能，通過Ajax動態獲取資料然後進行實時渲染，結合CSS3動畫模仿原生App互動，然後再進行打包（使用工具把Web應用包一個殼，這個殼本質上是瀏覽器）變成一個“原生”應用。

在PC端也有廣泛的應用，通常情況下使用Ajax非同步請求資料，然後實現內容區域性重新整理，區域性重新整理的本質是動態生成DOM，新生成的DOM元素並沒有真實存在於文件中，所以當再次重新整理頁面時新新增的DOM元素會“丟失”，通過單頁面應可以很好的解決這個問題。

10.2 路由

在後端開發中通過URL地址可以實現頁面（檢視）的切換，但是AngularJS是一個純前端MVC框架，在開發單頁面應用時，所有功能都在同一頁面完成，所以無需切換URL地址（即不允許產生跳轉），但Web應用中又經常通過連結（a標籤）來更新頁面（檢視），當點選連結時還要阻止其向伺服器發起請求，通過錨點（頁內跳轉）可以實現這一點。

實現單頁面應用需要具備：
a、只有一頁面
b、連結使用錨點

通過上面的例子發現在單一頁面中可以能過hashchange事件監聽到錨點的變化，進而可以實現為不同的錨點準不同的檢視，單頁面應用就是基於這一原理實現的。

AngularJS對這一實現原理進行了封裝，將錨點的變化封裝成路由（Route）,這是與後端路由的根本區別。

在1.2版前路由功能是包含在AngularJS核心程式碼當中，之後的版本將路由功能獨立成一個模組，下載angular-route.js

10.2.1 使用
1、引入angular-route.js

2、例項化模組（App）時，當成依賴傳進去（模組名稱叫ngRoute）。

3、配置路由模組

4、佈局模板
通過ng-view指令佈局模板，路由匹配的檢視會被載入渲染到些區域。

10.2.1 路由引數

1、提供兩個方法匹配路由，分別是when和otherwise，when方法需要兩個引數，otherwise方法做為when方法的補充只需要一個引數，其中when方法可以被多次呼叫。
2、第1個引數是一個字串，代表當前URL中的hash值。
3、第2個引數是一個物件，配置當前路由的引數，如檢視、控制器等。

a、template 字串形式的檢視模板
b、templateUrl 引入外部檢視模板
c、controller 檢視模板所屬的控制器
d、redirectTo跳轉到其它路由

4、獲取引數，在控制中注入$routeParams可以獲取傳遞的引數

十一、其它

11.1 jQuery

在沒有引入jQuery的前提下AngularJS實現了簡版的jQuery
Lite，通過angular.element不能選擇元素，但可以將一個DOM元素轉成jQuery物件，如果引提前引入了jQuery則angular.element則完全等於jQuery。

11.2 bower

基於NodeJS的一個靜態資源管理工具，由twitter公司開發維，解決大型網站中靜態資源的依賴問題。 npm node package
manager 1、依賴NodeJS環境和git工具。 2、npm install -g bower安裝bower 3、bower
search 查詢資源資訊 4、bower install 安裝（下載）資源，通過#號可以指定版本號 5、bower info
檢視資源資訊 6、bower uninstall 解除安裝（刪除）資源