4.Angular框架-豆瓣電影API、 $http服務、自定義指令

1.1. WebAPI

• 聚合數據
• 百度API服務

API 應用程序編程接口，簡單來講，就是：方法
依賴於Web而提供的API稱爲： WebAPI ，經過URL實現。

能夠把 WebAPI 看做是有 輸入和輸出（I/O） 的方法

webapi就至關於函數
webapi的參數（?username=小明&pwd=123465） 至關於 函數參數
    function fn(username, pwd) {}  fn('小明', 123456)
webapi接口返回的數據，就至關於函數的返回值

1.2. 豆瓣電影項目

1.2.1. 豆瓣電影API

• 豆瓣電影
• 加載動畫

1 輸入上述網址
2 點擊最上部的開發文檔，進入 豆瓣API快速入門
3 從該頁面中找到 'https://api.douban.com/v2/' 這是全部API的URL地址的前半部分
4 點擊左側菜單中的 '豆瓣Api V2（測試版）'，進入 豆瓣Api V2（測試版）
5 將頁面滑動到底部，找到 '電影Api V2'，點擊，而後會進入到 Movie API Doc 頁面
6 在該頁面中便可找到："正在熱映"、"即將上映"、"Top250"

• 正在熱映API： "/v2/movie/in_theaters"
• 完整的URL： "https://api.douban.com/v2/movie/in_theaters"

1.2.2. 模塊的劃分

• 原則：按照功能模塊進行劃分

首頁模塊、電影詳情頁模塊
有三個模塊： "正在熱映"、"即將上映"、"Top250"

各個模塊之間相互獨立， 主模塊中引入單個模塊便可！

1.2.3. 電影案例思路

• 1 首頁模塊的搭建
• 2 正在熱映、即將上映、Top250模塊的搭建
• 3 經過$http服務獲取數據，展現列表（in_theaters）
• 4 建立跨域服務，獲取數據，展現列表
• 5 實現分頁功能
• 6 其餘兩個模塊的功能實現
• 7 統一實現三個模塊的功能
• 8 添加加載動畫
• 9 導航欄焦點狀態高亮處理
• 10 實現搜索功能
• 11 實現電影詳情頁

1.2.4. ng-src

• 做用：設置圖片的src屬性
• 目的：爲了解決瀏覽器優先解析img的src屬性的問題
• 其餘屬性：ng-href

<img ng-src="{{item.iamges.large}}" alt="">

1.3. $http服務

• 說明：提供了XHR的功能，相似於jQuery中的$.ajax()

1.3.1. $http.get

• 做用：發送get請求
• 語法：$http.get(url, [option])

app.controller('DemoController', ['$scope', '$http', function($scope, $http) {
    // 路徑最好使用絕對路徑
    $http.get('url').then(function(response) {
        // 成功的回調函數
    }, function() {
        // 失敗的回調函數
    });
}]);

1.4. JSONP -實現跨域

1.4.1. JSONP跨域原理分析

• 動態建立script標籤並添加到頁面中，瀏覽器會根據script標籤的src屬性發送請求
• script標籤的src屬性帶有：'?callback="jsonpcallback"' 參數
• 由服務器返回的是：函數調用，格式爲：';jsonpcallback({})'

1.4.2. 其餘跨域方式

• window.name：同一個標籤也中的頁面共享同一個 name 屬性
• iframe
• postMessage

1.5. 2 $http.jsonp -實現跨域

• 說明：angular爲了防止全局污染，把JSONP的回到函數放在angular.callbacks對象中
• 注意：豆瓣API 支持JSONP方式的調用，可是不支持包含點的狀況！
• 結論：沒法使用angular的內置 $http.jsonp 跨域訪問豆瓣API中的數據

$http.jsonp("url地址?callback=JSON_CALLBACK").then();
// 獲取手機號碼歸屬地
// http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&callback=JSON_CALLBACK&timestamp=' + (new Date()-0)

1.6. $scope.$apply()

• 做用：強制讓 angular 監視數據的變化
• 注意：angular的內置方法，會自動調用$apply執行髒檢查
• 說明：

1 angular代碼執行會觸發 Dirty Check 機制，進行數據的雙向綁定
2 異步操做是在angular代碼執行完畢以後才執行的
3 也就是說，angular代碼執行完了，髒檢查已經執行完畢，才執行的異步回調
4 此時，能夠在異步操做中手動調用 $scope.$apply() 方法告訴angular讓其當即執行一次 Dirty Check
5 執行完畢，angular知道了數據變化，就會展現出咱們想要的數據

若是沒有調用 $scope.$apply，數據已經改變了，可是雙向綁定沒有觸發。

1.7. 自定義指令

• 概述:

1 自定義指令用於擴展和加強HTML
2 用於封裝一些經常使用並且共用的功能
3 AngularJS仍然有DOM操做,全部的DOM操做都應該集中在自定義指令中
4 內部指令基本知足咱們平時開發的需求, 少數狀況的一些特殊需求,會用到自定義指令

1.7.1. 建立指令

• 語法：模塊.directive('指令名稱', callback)
• 說明：建立指令的語法與建立控制器的語法徹底相同

// 第一個參數：表示指令的名稱，使用駝峯命名法，在視圖中使用時修改成`-`分割的形式
// 第二個參數：是一個回調函數，讓用戶設置該指令的行爲
angular.module('testApp', [])
    .directive('myBtn', [function() {
        return {};
    }]);

1.7.2. 指令經常使用屬性說明

• template: 模板，設置自定義指令顯示的內容

• templateUrl: 能夠指定一個模板的id或者url地址

  • id：模板的id，須要給模板設置type屬性爲：type="text/ng-template"，該模板須要在ng-app內
  • url: 一個頁面，頁面中用於存放模板標籤 （agnular會異步請求該路徑，注意跨域問題）

• restrict: 限制指令的使用方式，取值：'E'/'C'/'M'/'A'，取值是區分大小寫的

<!-- 標籤 -->
<my-btn></my-btn>
<!-- 類名 -->
<div class="my-btn"></div>
<!-- 註釋 -->
<!-- directive:my-btn -->
<!-- 屬性 -->
<div my-btn></div>

• link: 該屬性的值是一個函數，這個函數給當前指令提供了事件，該函數有3個參數

  • scope: 表示當前指令的做用域，用來暴露一些數據，相似與控制器的scope，只在當前指令中有效
  • element: 表示一個jqLite對象，是自定義指令所在標籤對應的jqLite對象
  • attribute: 表示自定義指令所在標籤的全部指令屬性的集合
  • link 用於控制指令的行爲

• replace: 須要一個布爾值。爲true時，會將自定義指令所在的標籤替換爲模板字符串

1.7.3. 參考文章

• 自定義指令參考
• bootstrap指令庫