標籤：... 工作 oct when ble main 關聯 原理 sel
1—$http
可以從伺服器中擷取更大的資料集，這裡使用angularjs的內建服務稱為$http。使用angularjs的依賴注入為phoneList組件的控制器提供服務。
在我們的控制器中使用angularjs的$http服務，向我們的web伺服器發出http請求，以擷取檔案中的資料。
app/phone-list/phone-list.component1.js：
angular.module(‘phoneList‘).component(‘phoneList‘,{ templateUrl:‘phone-list/phone-list.template.html‘, controller:function PhoneListController($http){ var self = this; self.orderProp = ‘age‘; $http.get(‘phones/phones.json‘).then(function(response){ self.phones = response.data; }); } });
ps：$http向web伺服器發出HTTP GET請求，此處URL為json檔案地址。伺服器通過提供json檔案中的資料進行響應。（響應也可以由後端伺服器動態產生）
該$http服務返回一個promise對象，其有一個方法，用來處理非同步響應，並將電話資料分配給控制器，作為一個屬性。 Ps：angularjs檢測到json響應，並將其解析為傳遞給我們回調的對象的屬性。
由於phones在一個回呼函數中對該屬性進行賦值，其中this沒有定義值，因此引入一個局部變數self，指向控制器執行個體。
Ps：要在angularjs中使用服務，只需將所需的依賴項的名稱聲明為控制器建構函式的參數：
function PhoneListController($http){…}
當構建控制器時，angularjs的依賴注入器為您的控制器提供服務。依賴注入器還負責建立服務可能具有的任何依懶性。（服務通常依賴於其他服務）。Ps： 參數名稱很重要，因為注入器使用這些進行尋找依賴關係。
$http服務是一個核心的angularjs服務，通過瀏覽器的XMLHttpRequest對象或通過jsonp促進與遠程HTTP伺服器的通訊。$http服務是一個函數，其接收一個參數-一個設定物件-用於產生http請求並返回promise。
$http({ method: ‘GET‘, url: ‘/url‘ }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. });
Ps：響應對象具有的屬性：資料（用於變換函數轉換的響應體）、status（響應的http狀態代碼）、標題（）、config（用於產生請求的設定物件）、statusText（響應的http狀態文本）、xhrStatus（）
也可使用捷徑：（ $http(config); ）
$http.get(‘/url’,config).then(successCallback, errorCallback);$http.post(‘/url’,data,config).then(successCallback, errorCallback);$http.head(url,[config]);$http.put(url,data,[config]);$http.delete(url,[config]);$http.jsonp(url,[config]);$http.patch(url,data,[config]);
$http服務將自動為所有請求添加特定的http頭，這些預設值可以通過訪問當前包含此預設配置的設定物件。要添加或覆蓋這些預設值，只需從這些設定物件中添加或刪除屬性即可。
要添加除post或put之外的http方法的標題，只需添加一個新的對象，以較低的http方法名稱為關鍵字，如$httpProvider.defaults.headers.get = {‘My-Header’ : ‘value’}
預設值也可以在運行時通過對象以相同的方式設定，如：
module.run(function($http){ $http.defaults.headers.common.Authorization = ‘Basic YmVlcDpib29w’ ;});
可以在headers調用時傳遞的config對象中提供一個屬性，覆蓋預設值而不在全域更改它們。
要顯示刪除根據每個請求自動添加的$httpProvider.defaults.headers標題，請使用headers屬性，設定所需的標題為undefined：
var req = { method:‘POST‘, url:‘http://example.com‘, headers:{ ‘Content-Type‘:undefined }, data:{test:‘test‘} } $http(req).then(function(){...},function(){...});
Ps：$首碼用於表明是angularjs的內建服務。
例子：通過擷取json檔案中的資料進行頁面渲染，涉及到的檔案有：index2.html、app.module.js、phone-list.template.html、phone-list.component1.js、phones.json
Index2.html：
<!DOCTYPE html> <html lang="en" ng-app="phoneList"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/app.module.js"></script> <script src="phone-list/phone-list.component1.js"></script> </head> <body> <phone-list></phone-list> </body> </html>
app.module.js：
//用來引入需要使用的module檔案 //定義一個phonecatAPP模組 var phonecatApp = angular.module(‘phonecatApp‘, []); //定義一個phoneList模組 var phoneList = angular.module(‘phoneList‘,[]);
phone-list.template.html：
<div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!--Sidebar content--> <p> Search: <input ng-model="$ctrl.query" /> </p> <p> Sort by: <select ng-model="$ctrl.orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> </p> </div> <div class="col-md-10"> <ul class="phones"> <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query |orderBy:$ctrl.orderProp"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> <p>{{phone.age}}</p> </li> </ul> </div> </div> </div>
phone-list.component1.js：
angular.module(‘phoneList‘).component(‘phoneList‘,{ templateUrl:‘phone-list/phone-list.template.html‘, controller:function PhoneListController($http){ var self = this; self.orderProp = ‘age‘; $http.get(‘phones/phones.json‘).then(function(response){ self.phones = response.data; }); } });
phones.json：
[ { "age":13, "id":"motorola-defy-with-motoblur", "name":"Motorola DEFY\u2122 with MOTOBLUR\u2122", "snippet":"Are you ready for everything life throws your way?" }, { "age":15, "id":"sotorola-defy-with-motoblur", "name":"Aotorola DEFY\u2122 with MOTOBLUR\u2122", "snippet":"Hi!Are you ready for everything life throws your way?" } ]
例子：擷取json檔案中的資料渲染到表格中，這裡涉及的檔案有：mytableindex.html檔案、app.module.js檔案、mytable-list.template.html檔案、mytable.component.js檔案、tables.json檔案
mytableindex.html：
<!DOCTYPE html> <html lang="en" ng-app="tableList"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/app.module.js"></script> <script src="phone-list/mytable.component.js"></script> <style> table{ border:1px solid gray; } tr{ border-top:1px solid gray; } </style> </head> <body> <table-list></table-list> </body> </html>
app.module.js：
//用來引入需要使用的module檔案 //定義一個phonecatAPP模組 var phonecatApp = angular.module(‘phonecatApp‘, []); //定義一個phoneList模組 var phoneList = angular.module(‘phoneList‘,[]); //定義一個tableList模組 var tableList = angular.module(‘tableList‘,[]);
mytable-list.template.html：
<div> <table> <caption>資訊列表</caption> <tr> <th>序號</th> <th>公司</th> <th>連絡人</th> <th>電話</th> </tr> <tr ng-repeat="table in $ctrl.tables1"> <!--$ctrl.tables1指定模板js檔案中擷取到的model--> <td>{{table.numx}}</td> <td>{{table.companyx}}</td> <td>{{table.contactx}}</td> <td>{{table.phonex}}</td> </tr> </table> </div> <!--這裡模板的css樣式可以寫在主html檔案的style標籤內，或者在主html檔案中引入外部css檔案-->
mytable.component.js：
angular.module(‘tableList‘).component(‘tableList‘,{ //這裡的angular.module(‘tableList‘)也可以直接用app.module.js檔案中定義的模組tableList //在tableList模板上定義tableList組件 templateUrl:‘phone-list/mytable-list.template.html‘, //組件用到的模板檔案的URL controller:function MyTableListController($http){ //這裡的controller即綁定到了組件tableList上，所以在模板中就不再需要ng指令綁定模板 var self = this; // self.orderProp = ‘numx‘; $http.get(‘phones/tables.json‘).then(function(response){ self.tables1 = response.data; //tables可以理解為自己指定的變數名，指代model，即json檔案中的資料 }); } });
或：
angular.module(‘tableList‘).component(‘tableList‘,{ //這裡的angular.module(‘tableList‘)也可以直接用app.module.js檔案中定義的模組tableList //在tableList模板上定義tableList組件 templateUrl:‘phone-list/mytable-list.template.html‘, //組件用到的模板檔案的URL controller:function MyTableListController($http){ //這裡的controller即綁定到了組件tableList上，所以在模板中就不再需要ng指令綁定模板 var self = this; $http({ method: ‘GET‘, url: ‘phones/tables.json‘ }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available self.tables1 = response.data; }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. return response.data; }); } });
tables.json：
[ { "numx":"1", "companyx":"創匠", "contactx":"zhajd", "phonex":"17878372837" }, { "numx":"2", "companyx":"創匠xinxi", "contactx":"zskd", "phonex":"17879072837" }, { "numx":"3", "companyx":"創匠keji", "contactx":"shdjcd", "phonex":"17870902837" }, { "numx":"4", "companyx":"創匠gs", "contactx":"djldd", "phonex":"17878372837" }, { "numx":"5", "companyx":"chuangjiang", "contactx":"ldos", "phonex":"17877896837" }, { "numx":"6", "companyx":"chjdkj", "contactx":"zdljd", "phonex":"17878567837" } ]
例子：將資料渲染到表格中
<!DOCTYPE html> <html lang="en" ng-app="exampApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <style> table{ border:1px solid gray; } td{ border-top:1px solid gray; /*border-bottom:1px solid gray;*/ } </style> </head> <body> <div> <table ng-controller="exampListController"> <tr> <th>序號</th> <th>公司</th> <th>連絡人</th> <th>電話</th> </tr> <tr ng-repeat="item in data"> <td>{{item.numx}}</td> <td>{{item.companyx}}</td> <td>{{item.contactx}}</td> <td>{{item.phonex}}</td> </tr> </table> </div> <script> var exampApp = angular.module(‘exampApp‘,[]); exampApp.controller(‘exampListController‘,function exampListController($scope){ $scope.data = [ { "numx":"1", "companyx":"創匠", "contactx":"zhajd", "phonex":"17878372837" }, { "numx":"2", "companyx":"創匠xinxi", "contactx":"zskd", "phonex":"17879072837" }, { "numx":"3", "companyx":"創匠keji", "contactx":"shdjcd", "phonex":"17870902837" }, { "numx":"4", "companyx":"創匠gs", "contactx":"djldd", "phonex":"17878372837" }, { "numx":"5", "companyx":"chuangjiang", "contactx":"ldos", "phonex":"17877896837" }, { "numx":"6", "companyx":"chjdkj", "contactx":"zdljd", "phonex":"17878567837" } ]; }); </script> </body> </html>
路由：
組件允許我們以模組化、可測試的方式將控制器與模板相結合，我們將使用組件進行路由，每個路由將與一個組件相關聯，該組件將負責提供視圖模板和控制器。
angular-route.js：定義angularjs的ngRoute模組，為我們提供路由。
app.config.js：配置提供給我們的主模組。
Phone-detail.module.js：定義包含phoneDetail組件的新模組。
Phone-detail.component.js：定義一個虛擬phoneDetail組件。
依賴注入：
依賴注入是angularjs的核心，需要瞭解其工作原理!
當應用程式引導時，angularjs建立一個注入器，用於尋找和注入應用程式所需的所有服務。注射器僅執行以下步驟：載入您在應用程式中指定的模組定義；註冊在這些模組中定義的所有供應商；當被要求這樣做時，通過其供應商將服務及其依賴關係執行個體化為可注射功能的參數。供應商是提供（建立）服務執行個體並公開配置API的對象，可用於控制服務的建立和運行時行為。在$route服務的情況下，$routeProvider公開的API允許你為應用程式定義路由。
提供者（$provide）：該$provice服務負責告訴angular如何建立新的可注射的東西，這些東西叫服務，即$provide服務告訴angular如何建立服務。服務由所謂的供應商定義，這是在使用時建立的$provide。通過服務provider方法定義提供者$provide，$provide將其注入到應用程式的config功能中獲得服務。
myMod.config(function($provide){ $provide.provider(‘greeting‘,function(){ this.$get = function(){ return function(name){ alert("hello" + name); }; }; }); });
ps：這裡定義了名為greeting的新的供應商作為服務，我們可以注入一個名為greeting的變數可以注射到任何一個可注射的函數中，如控制器，angular將調用提供者的$get函數來返回一個新的服務執行個體。在和這種情況下，要注入的東西是一個基於name參數和alert訊息的函數。我們可以這樣使用：
myMod.controller("MainController",function($scope,greeting){ $scope.onClick = function(){ greeting("Ford Prefect"); } })
service、factory、value都只是定義提供者的各個部分的捷徑，即它們提供了一種定義提供者的方法，而不必輸入所有的東西：
myMod.config(function($provide){ $provide.factory(‘greeting‘,function(){ return function(name){ alert("hello, " + name); }; }); });
greeting服務總是返回相同的功能，因此可以使用value來定義：
myMod.config(function($provide){ $provide.value(‘greeting‘,function(name){ alert("hello, " + name); }); });
var myMod = angular.module(‘myModule‘,[]); myMod.provider(‘greeting‘,...); myMod.factory(‘greeting‘,...); myMod.service(‘greeting‘,...); myMod.value(‘greeting‘,...); myMod.provider(‘greeting‘,function(){ this.$get = function(){ return function(name){ alert("hello, " + name); }; }; });
myMod.factory(‘greeting‘,function(){ return function(name){ alert("hello, " + name); }; });
myMod.service(‘greeting‘,function(){ return function(name){ alert("hello, " + name); }; });
myMod.value(‘greeting‘,function(name){ alert("hello, " + name); });
注射器（$injector）：負責使用我們提供的代碼$provide實際建立我們的服務執行個體。有了$injector，則可以使用服務get名稱調用定義的服務執行個體。注射器還負責將服務注入功能。每一個angularjs應用程式都有一個$injector，當應用程式啟動時它將被建立，可以通過注入$injector注入到任何一個可注射的函數。
一旦有了$injector，通過調用服務的get方法，可以得到一個已定義好的服務的執行個體
var greeting = $injector.get(‘greeting‘); greeting(‘Ford Prefect‘);
注射器還負責將服務注入到函數中：
var myFunction = function(greeting){ greeting(‘Ford Prefect‘); }; $injector.invoke(myFunction);
配置供應商：
提供者允許大量的配置。當通過provider或angularjs提供的捷徑建立一個服務時，就建立了一個provider，它定義了服務是如何建立的。這些providers可以注入到你的應用程式的config部分，便於互動。
Angular運行你的程式主要有兩階段：config、run；config階段可以根據需要設定任何供應商的地方，這也是設定指令、控制器、過濾器等的地方，run階段是angular實際編譯DOM並啟動應用程式的地方。可以使用myMod.config和myMod.run函數添加在這些階段中啟動並執行其他代碼。在config階段，只有供應商可以注射。
控制器（$controller）：可以將東西注入到控制器中，但不能將控制器注入到事件中。
過濾器（filter）和指令（directive）：
將core模組註冊為主phonecatApp模組的依賴關係：
angular.module(‘phonecatApp‘, [ ... ‘core‘, ... ]);
ps：可能稍微有點淩亂，還請見諒。所謂好記性不如爛筆頭，這是選擇寫部落格的初衷，希望通過整理能夠讓自己更深入理解，以後不清楚的地方還可以回來看看。同時，放在這種公用的地方，也希望能夠給一些人一丁點的參考，至少我從網上獲得了很多。此外，也期待描述的不妥的地方，有小夥伴可以指出，然後改進，進步。（8-17）
參考 & 感謝：https://docs.angularjs.org
angularjs學習筆記--$http、資料渲染到表格、路由、依賴注入、provider
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
