標籤：eid inject sel 雙向資料繫結 for var amount 使用 cti
依賴：
RESTful功能由angularjs在ngResource模組中提供，該模組與核心angularjs架構分開分發。
ng-model：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body> <div ng-app ng-init="qty=1;cost=2"> <b>Invoice:</b> <div> Quantity: <input type="number" min="0" ng-model="qty" /> </div> <div> Costs: <input type="number" min="0" ng-model="cost"> </div> <div> <b>Total:</b>{{qty*cost|currency}} </div> </div></body></html>
Ps：required屬性規定必須在提交之前填寫輸入欄位。
controllerindex.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/invoice1.js"></script> </head> <body> <div ng-app="invoice1" ng-controller="InvoiceController as invoice"> <b>Invoice:</b> <div> Quantity: <input type="number" min="0" ng-model="invoice.qty" required> </div> <div> Costs: <input type="number" min="0" ng-model="invoice.cost" required> <select ng-model="invoice.inCurr"> <option ng-repeat="c in invoice.currencies">{{c}}</option> </select> </div> <div> <b>Total:</b> <span ng-repeat="c in invoice.currencies">{{invoice.total(c)|currency:c}}</span><br> </div> <button class="btn" ng-click="invoice.pay()">Pay</button> </div> </body> </html>
invoice1.js：
angular.module(‘invoice1‘,[]). controller(‘InvoiceController‘,function InvoiceController(){ this.qty = 1; this.cost = 2; this.inCurr = ‘EUR‘; this.currencies = [‘USD‘,‘EUR‘,‘CNY‘]; this.usdToForeignRates = { USD:1, EUR:0.74, CNY:6.09 }; this.total = function total(outCurr){ return this.convertCurrency(this.qty * this.cost,this.inCurr,outCurr); }; this.convertCurrency = function convertCurrency(amount,inCurr,outCurr){ return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr]; }; this.pay = function pay(){ window.alert("thanks"); }; });
ps：控制器是JavaScript對象，由JavaScript對象的建構函式建立。控制器指向一個建構函式，該函數用於建立實際的控制器執行個體。控制器的目的是將變數和功能暴露給運算式和指令。
Ps：控制器的$scope用來儲存angularjs model的對象。
controller2.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/finance2.js"></script> <script src="../scripts/invoice2.js"></script> </head> <body> <div ng-app="invoice2" ng-controller="InvoiceController as invoice"> //這裡綁定控制器名字部分不明白？？ <b>Invoice:</b> <div> Quantity: <input type="number" min="0" ng-model="invoice.qty" required> </div> <div> Costs: <input type="number" min="0" ng-model="invoice.cost" required> <select ng-model="invoice.inCurr"> <option ng-repeat="c in invoice.currencies">{{c}}</option> </select> </div> <div> <b>Total:</b> <span ng-repeat="c in invoice.currencies">{{invoice.total(c)|currency:c}} </span><br> </div> <button class="btn" ng-click="invoice.pay()">Pay</button> </div> </body> </html>
finance2.js：
angular.module(‘finance2‘,[]) .factory(‘currencyConverter‘,function(){ var currencies = [‘USD‘,‘EUR‘,‘CNY‘]; var usdToForeignRates = { USD:1, EUR:0.74, CNY:6.09 }; var convert = function(amount, inCurr, outCurr){ return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr]; }; return { currencies:currencies, convert:convert }; });
invoice2.js：
angular.module(‘invoice2‘,[‘finance2‘]) .controller(‘InvoiceController‘,[‘currencyConverter‘,function InvoiceController(currencyConverter){//將服務執行個體作為參數調用控制器 this.qty = 1; this.cost = 2; this.inCurr = ‘EUR‘, this.currencies = currencyConverter.currencies; this.total = function total(outCurr){ return currencyConverter.convert(this.qty *this.cost,this.inCurr,outCurr); }; this.pay = function pay(){ window.alert(‘thanks‘); }; }]);
controllerindex.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/finance3.js"></script> <script src="../scripts/invoice3.js"></script> </head> <body> <div ng-app="invoice3" ng-controller="InvoiceController as invoice"> <b>Invoice:</b> <div> Quantity: <input type="number" min="0" ng-model="invoice.qty" required> </div> <div> Costs: <input type="number" min="0" ng-model="invoice.cost" required> <select ng-model="invoice.inCurr"> <option ng-repeat="c in invoice.currencies">{{c}}</option> </select> </div> <div> <b>Total:</b> <span ng-repeat="c in invoice.currencies">{{invoice.total(c)|currency:c}} </span><br> </div> <button class="btn" ng-click="invoice.pay()">Pay</button> </div> </body> </html>
finance3.js：
angular.module(‘finance3‘,[]) .factory(‘currencyConverter‘,[‘$http‘,function($http){ var currencies = [‘USD‘,‘EUR‘,‘CNY‘]; var usdToForeignRates = {}; var convert = function(amount, inCurr, outCurr){ return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr]; }; var refresh = function(){ var url = ‘http://api.ficer.io/latest?base=USD&symbols=‘ + currencies.join(","); return $http.get(url).then(function(response){ usdToForeignRates = response.data.rates; usdToForeignRates[‘USD‘] = 1; }); }; refresh(); return { currencies:currencies, convert:convert }; }]);
invoice3.js：
angular.module(‘invoice3‘,[‘finance3‘]) .controller(‘InvoiceController‘,[‘currencyConverter‘,function InvoiceController(currencyConverter){ this.qty = 1; this.cost =2; this.inCurr = ‘EUR‘; this.currencies = currencyConverter.currencies; this.total = function total(outCurr){ return currencyConverter.convert(this.qty * this.cost,this.inCurr,outCurr); }; this.pay = function pay(){ window.alert("thanks"); }; }]);
ps：
依賴注入（DI），一種軟體設計模式，用於處理如何建立對象和函數，以及如何保持其依賴性。Angularjs（指令、過濾器、控制器、服務等）內的所有內容都使用依賴注入進行建立和布線。在angularjs中，DI容器稱為注射器。要使用DI，需要有一個地方，所有的東西都可以在這裡註冊，這就是angularjs中的模組的作用。當angularjs啟動時，將通過ng-app指令使用模組定義的名字的配置，包括該模組所依賴的所有其他模組的配置。
控制器：angularjs中，控制器由JavaScript建構函式定義，用於增加angularjs scope。當控制器通過ng-controller指令附加到DOM時，angularjs將使用指定的controller的建構函式進行執行個體化一個新的controller對象。將建立一個新的子範圍，並作為注入參數提供給controller的建構函式作為scope。
使用控制器：設定$scope對象的初始狀態（通過將屬性附加到$scope對象來設定範圍的初始狀態，屬性包含視圖模型）；向$scope對象添加行為。
設定$scope對象的初始狀態：
controllerindex.html：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/controller4.js"></script> </head> <body ng-controller="GreetingController"> {{greeting}} </body> </html>
controller4.js：
var myApp = angular.module(‘myApp‘,[]); myApp.controller(‘GreetingController‘,[‘$scope‘,function($scope){ $scope.greeting = ‘Hola‘; }]);
將行為添加到範圍對象上：
controllerindex5.html：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script> <script src="../scripts/controller5.js"></script> </head> <body ng-controller="DoubleController"> Two times <input ng-model="num" /> equals {{double(num)}} </body> </html>
controller5.js：
var myApp = angular.module(‘myApp‘,[]); myApp.controller(‘DoubleController‘,[‘$scope‘,function($scope){ $scope.double = function(value){ return value * 2; }; }]);
ps：分配給範圍的任何對象都將成為模型屬性。
Ps：一般，控制器只包含單個視圖所需的所有商務邏輯。控制器的常見用法：將不屬於控制器的工作封裝到服務中，然後通過依賴注入在控制器中使用這些服務。
ng-controller指令用於為模板建立範圍，且該範圍通過對應controller進行擴充。
應用程式開發人員通過註冊服務名字與服務工廠函數可以定義自己的服務。服務工廠函數產生單一的對象或函數，服務通過模組API註冊到模組，通常使用模組工廠API註冊服務：
var myModule = angular.module(‘myModule‘,[]); myModule.factory(‘serviceId‘,function(){ var shinyNewServiceInstance; //... return shinyNewServiceInstance; });
服務可以有自己的依賴，就像在控制器中聲明依賴關係一樣，通過在服務的工廠函數簽名中指定它們來聲明依賴關係。
var batchModule = angular.module(‘batchModule‘, []); batchModule.factory(‘batchLog‘, [‘$interval‘, ‘$log‘, function($interval, $log) { }
$provide註冊服務：可以通過模組內的$provide服務的config函數註冊服務
angular.module(‘myModule‘,[]).config([‘$provide‘,function($provide){ $provide.factory(‘serviceId‘,function(){ var shinyNewServiceInstance; //... return shinyNewServiceInstance; }); }]);
可以在定義組件或為模組提供run和config時，使用依賴注入。（1）服務、指令、過濾器、動畫的組件由可注入的Factory 方法或建構函式定義，這些組件可以注入服務和值作為依賴關係。（2）控制器由建構函式定義，可以將任何服務和值組件作為依賴關係注入，但可提供特殊的依賴關係。（3）run方法接受一個可注入service、value、constant組件作為依賴關係的函數。（4）config方法接受一個函數，可以用provider和constant組件作為依賴關係注入。
$inject屬性是要注入一系列服務名稱
ng-model指令通過將模型與視圖同步以及查看模型來提供雙向資料繫結。
參考 & 感謝：https://docs.angularjs.org
（8-18）
angularjs學習筆記--ng-model、controller、DI、$scope、$provide
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
