标签：使用 查找 factory cal font script asc orderby 其他
// Register the `phoneList` component on the `phoneList` module,
angular.
module(‘phoneList‘).
component(‘phoneList‘, {...});
// Define the `phonecatApp` module
angular.module(‘phonecatApp‘, [
// ...which depends on the `phoneList` module
‘phoneList‘
]);
通过phoneList在定义phonecatApp模块时传递依赖关系数组，AngularJS将使所有注册的实体也phoneList可以使用phonecatApp。
依赖注入：一种软件设计模式，用于处理组件如何保持其依赖性。Angularjs注射器子系统负责创建组件，解决其依赖性，并根据请求将其提供给其他组件。
工厂方法：定义指令、服务或过滤器时使用出厂功能，工厂方法注册了模块。宣布工厂的推荐方法：
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、模块、控制器、双向数据绑定、过滤器
标签：使用 查找 factory cal font script asc orderby 其他
原文地址：http://www.cnblogs.com/haimengqingyuan/p/7384592.html
