angular入門4

AngularJS 入門4

WebAPI

• 聚合數據
• 百度API服務

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

可以把 WebAPI 看作是有 輸入和輸出（I/O） 的方法

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

豆瓣電影項目

豆瓣電影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”

模塊的劃分

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

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

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

電影案例思路

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

ng-src

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

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

$http服務

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

$http.get

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

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

JSONP -實現跨域

JSONP跨域原理分析

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

其他跨域方式

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

2 $http.jsonp -實現跨域

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

// $http.jsonp 版本升級說明：
// https://docs.angularjs.org/guide/migration#migrate1.5to1.6-ng-services-$http

// 1.5 版本中使用方式：
$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以上版本中的用法：
// url 中也不在需要 callback=JSON_CALLBACK
var src = 'http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&timestamp=' + (new Date()-0);
// 需要注入 $sce 服務
var ret = $sce.trustAsResourceUrl(src);

$http.jsonp(ret, {
    jsonpCallbackParam: 'callback'
})

scope. apply()

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

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

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

自定義指令

• angularjs.org - Directive
• 概述:

1 自定義指令用於擴展和增強HTML
2 用於封裝一些常用而且共用的功能
3 AngularJS仍然有DOM操作, 所有的DOM操作都應該集中在自定義指令中
4 內部指令基本滿足我們平時開發的需求, 少數情況的一些特殊需求, 會用到自定義指令

創建指令

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

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

指令常用屬性說明

• 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: 爲DOM元素註冊事件以及更新DOM，一般將所有的業務邏輯放在此處

  • 該屬性的值是一個函數，這個函數給當前指令提供了事件，該函數有3個參數
  • scope: 表示當前指令的作用域，用來暴露一些數據，類似與控制器的scope，只在當前指令中有效
  • element: 表示一個jqLite對象，是自定義指令所在標籤對應的jqLite對象
  • attribute: 表示自定義指令所在標籤的所有指令屬性的集合
  • link 用於控制指令的行爲

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

參考文章

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