標籤：html 改變 .json binding 編寫 Null 字元串 建立 電話 ams
1-組件
建立組件，使用angularjs模組的conponent()方法，component(name,options);使用編譯器註冊組件定義，表示應用程式中的一個獨立的UI組件。組件定義通常僅由模板和控制器組成。name為組件名，options為組件定義對象，其屬性包括：controller（應該與新建立的範圍相關聯的控制器建構函式或作為字串傳遞的註冊控制器的名稱）、controllerAs（用於在組件範圍內引用控制器的標識符名稱）、template（html模板作為一個字串或函數返回一個HTML模板作為一個字串，應該被用作這個組件的內容，預設為空白字串）、templateUrl（路徑或函數，返回一個應該用作該組件內容的HTML模板的路徑）、bindings（定義DOM屬性與組件屬性之間的綁定，組件屬性始終綁定到組件控制器）、transclude（是否啟用內容泄露）、require（要求其他指令的控制器並將其綁定到該組件的控制器）、$...（附加到指令工廠函數和控制器建構函式的附加屬性，組件路由器用於注釋）
定義組件的例子：var myMod = angular.module(‘phonecatApp1‘, []);//1myMod.component(‘myComp‘,{ template:‘<div>My name is {{$ctrl.name}}</div>‘, controller:function(){ this.name = ‘shahar‘; }});//2myMod.component(‘myComp‘,{ template:‘<div>My name is {{$ctrl.name}}</div>‘, bindings:{name:‘@‘}});//3myMod.component(‘myComp‘,{ templateUrl:‘views/my-comp.html‘, controller:‘MyCtrl‘, controllerAs:‘ctrl‘, binds:{name:‘@‘} })
ps：定義組件時其名可以為myComp類似命名的組件，但在HTML 中引入時則需要使用類似<my-comp></my-comp>形式的命名法。
使用組件形式實現ul電話列表：
Component.html檔案：<!DOCTYPE html><html lang="en" ng-app="phonecatApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/app1.js"></script> <script src="../scripts/component1.js"></script></head><body> <phone-list></phone-list></body></html>app1.js：
angular.module(‘phonecatApp‘,[]);
component.js：angular.module(‘phonecatApp‘).component(‘phoneList‘,{ template: ‘<ul>‘ + ‘<li ng-repeat = "phone in $ctrl.phones">‘ + ‘<span>{{phone.name}}</span>‘ + ‘<p>{{phone.snippet}}</p>‘ + ‘</li>‘ + ‘</ul>‘, controller:function PhoneListController(){ this.phones = [ { name:‘Nexus S‘, snippet:‘The Next,Next Generation tablet.‘ }, { name:‘Motorola XOOM with wifi‘, snippet:‘The Next,Next Generation tablet.‘ }, { name:‘MOTOROLA XOOM‘, snippet:‘The Next,Next Generation.‘ } ]; }});
2--$http
$http({ url:‘data.json‘, //可以利用json檔案類比 method:‘GET‘,Params:{ ‘username’:’tan’}}).success(function(data,header,config,status){ //響應成功}).error(function(data,header,config,status){ //處理響應失敗});
// 修改全部訊息狀態為已讀 function initialize() { var deferred = $q.defer();//產生deferred非同步對象 $http({ url: ‘/api/Message/initialize‘, method: ‘POST‘ }).success(function (result) { deferred.resolve(result); //執行到這裡，改變deferred狀態為執行成功，返回result為從後台取到的資料，可以繼續執行then、done }).error(function (result) { deferred.reject(result);//執行到這裡，改變deferred狀態為執行失敗，返回data為報錯，可以繼續執行fail }); return deferred.promise;//起到保護作用，不允許函數外部改變函數體內的deferred狀態，控制非同步執行完成 }
Ps:url為絕對或相對的請求目標。params（字串map或對象），會被轉換成查詢字串追加到URL後面，如果不是字串，將會被json序列化。data這個資料代錶轉換過後的響應體。status表示響應的HTTP狀態代碼，headers這個函數是頭資訊的getter函數，可以接受一個參數，用於擷取對應名字值。config這個對象用來產生原始請求的完整設定對象。statusText是響應的HTTP狀態文本。
ps：
$q用於ajax非同步請求資料的回調控制deferred。angularjs中自己封裝的一種promise實現。一種內建服務，可以非同步執行函數，且當函數完成時或異常時允許使用函數的傳回值或返回執行狀態通知。
$q常用方法：defer()建立一個deferred對象，該對象可以執行幾個常用方法，如resolve、reject、notify等,all()傳入promise的數組，批量執行，返回一個promise對象，when()傳入一個不確定參數，若符合promise標準就返回一個promise對象。promise中定義的三種狀態：完成狀態、等待狀態、拒絕狀態。狀態的變更是無法復原的，等待狀態可以變成完成或拒絕狀態。
promise/deferred：承諾/延遲
promise協助開發人員用同步的方式編寫非同步代碼。一種對執行結果不確定的一種預先定義，如果成功做什麼事，失敗做什麼事，像是事先給了承諾。
defer，延遲，$defer()可以建立一個defer延遲物件執行個體，表示將會完成的任務的對象。$q中，使用resolve方法變成完成狀態，使用reject方法，變成拒絕狀態。
3--module
module是angularjs代碼的入口，首先需要聲明module，然後才定義angularjs中的其他組件元素，如controller、service、filter、directive、config代碼塊、run代碼塊等。
angular.module()可傳入三個參數：模組的名稱（必選參數，在其他地方可以被其他模組注入或在ngApp指令中聲明應用程式主模組）、模組的依賴（本模組需要依賴的其他模組的參數，若此處無聲明，則無法在模組中使用相依模組的任何組件）、模組的啟動配置函數（在angularjs config階段會調用該函數，對模組中的組件進行執行個體化對象執行個體之前的特定配置，如$routeProvider配置一樣程式的路由資訊）。
參考學習並感謝：
https://docs.angularjs.org/tutorial/step_00
http://www.runoob.com/angularjs/angularjs-tutorial.html
angularjs學習筆記--組件、$http、$q、module
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
