標籤：使用 尋找 factory cal font script asc orderby 其他
// Register the `phoneList` component on the `phoneList` module,angular. module(‘phoneList‘). component(‘phoneList‘, {...});
// Define the `phonecatApp` moduleangular.module(‘phonecatApp‘, [ // ...which depends on the `phoneList` module ‘phoneList‘]);
通過phoneList在定義phonecatApp模組時傳遞依賴關係數組，AngularJS將使所有註冊的實體也phoneList可以使用phonecatApp。
依賴注入：一種軟體設計模式，用於處理組件如何保持其依賴性。Angularjs注射器子系統負責建立組件，解決其依賴性，並根據請求將其提供給其他組件。
Factory 方法：定義指令、服務或過濾器時使用出廠功能，Factory 方法註冊了模組。宣布工廠的推薦方法：
angular.module(‘myModule‘,[]) .factory(‘serviceId‘,[‘depService‘,function(depService){ }]) .directive(‘directiveName‘,[‘depService‘,function(depService){ }]) .filter(‘filterName‘,[‘depService‘,function(depService){ }]);
模組方法：通過調用config和run方法來指定在模組的配置和運行時
controller：
（1）someModule.controller(‘MyController‘,[‘$scope‘,‘dep1‘,‘dep2‘,function($scope,dep1,dep2){ $scope.aMethod = function(){ }}]) （2）<div ng-controller="MyController"> <button ng-click="sayHello()"></button> </div> function MyController($scope,greeter){ $scope.sayHello = function(){ greeter.greet(‘hello world‘); }; }
主html檔案（index1.html）、template模板html檔案（phone-list.template.html）、module檔案（app.module.js）、模板html檔案對應的js檔案（phone-list.component.js）之間的相互關係：
index1.html用於查看介面效果，也可引入定義的組件；phone-list.template.html定義模板的介面及渲染情況；app.module.js用於利用angularjs定義模組；phone-list.component.js用於模板html檔案對應的資料模型及組件定義，在相應的模板下定義組件。
index1.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/app.module.js"></script> <script src="phone-list/phone-list.component.js"></script> <!--<script src="../scripts/component1.js"></script>--> </head> <body> <phone-list></phone-list> </body> </html>
Ps：這裡直接引用phone-list.component.js中定義的組件，別忘了對應依賴的檔案。組件引入時以phone-list命名法引入。
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>
Ps：這裡是index1檔案通過該模板html檔案顯示的內容。$ctrl是組件的別名。filter是過濾器。可以選擇通過name或age屬性進行排序。也可以通過name或age屬性進行對應尋找。
app.module.js定義模組檔案：
//用來引入需要使用的module檔案 //定義一個phonecatAPP模組 var phonecatApp = angular.module(‘phonecatApp‘, []);
Ps：該檔案用於定義或引用各種模組。
phone-list.component.js模型檔案：
angular.module(‘phonecatApp‘,[]).component(‘phoneList‘,{ templateUrl:‘phone-list/phone-list.template.html‘, controller:function phoneListController(){ this.phones = [ { name:‘Nmas‘, snippet:‘dsaksn dsj saj jsas ds‘, age:1 }, { name:‘Dmas‘, snippet:‘saddsaksn dsj saj jsas ds‘, age:2 }, { name:‘Amas‘, snippet:‘fredsaksn dsj saj jsas ds‘, age:3 } ]; this.orderProp = ‘age‘; } });
ps：該檔案用於定義組件，其templateUrl為對應的模板html檔案，其控制器controller定義了對應的資料模型，控制其資料結構。這裡的phonecatApp為app.module.js中定義的模組，即在該模組下註冊組件phoneList。
Angularjs過濾器：使用一個管道字元(|)添加到運算式和指令中，可用於轉換資料。過濾器有：currency（格式化數字為貨幣格式）、filter（從數組項中選擇一個子集）、lowercase（格式化字串為小寫）、orderBy（根據某個運算式排列數組）、uppercase（格式化字串為大寫）
<p>姓名為 {{ lastName | uppercase }}</p>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../angular/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="costCtrl"> 數量: <input type="number" ng-model="quantity"> 價格: <input type="number" ng-model="price"> <!--雙向資料繫結--> <p>總價 = {{ (quantity * price) | currency }}</p> <!--實現quantity與price的乘積，並利用currency進行格式化，成貨幣形式--> </div> <script> var app = angular.module(‘myApp‘, []);//定義名為myApp的模組 app.controller(‘costCtrl‘, function($scope) { //在該模組下定義一個控制器costCtrl，通過建構函式實現 $scope.quantity = 1; //初始化quantity $scope.price = 9.99; //初始化price }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>--> <script src="../angular/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>輸入過濾內容:</p> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:‘country‘"> {{ (x.name | uppercase) + ‘, ‘ + x.country }} </li> </ul> </div> <script>//利用angular定義名為myApp的模組，並在該模組下定義名為namesCtrl的控制器，通過建構函式實現該控制器，控制器內定義了資料模型，該資料模型為數組形式，其內包含多個對象 angular.module(‘myApp‘, []).controller(‘namesCtrl‘, function($scope) { $scope.names = [ {name:‘Jani‘,country:‘Norway‘}, {name:‘Hege‘,country:‘Sweden‘}, {name:‘Kai‘,country:‘Denmark‘} ]; }); </script> </body> </html>
自訂過濾器：
<!DOCTYPE html> <html> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> 姓名: {{ msg | reverse }} </div> <script> var app = angular.module(‘myApp‘, []); app.controller(‘myCtrl‘, function($scope) { $scope.msg = "Runoob"; }); app.filter(‘reverse‘, function() { //可以注入依賴 return function(text) { return text.split("").reverse().join(""); } }); </script> </body> </html>
ps：如有不妥之處，歡迎指出 （2017-8-16）
參考 & 感謝 https://docs.angularjs.org/tutorial
angularjs學習筆記--主html&template html&module&template js、模組、控制器、雙向資料繫結、過濾器
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
