慎用ng-repeat 中的 $index
http://web.jobbole.com/82470/
服务provider，公共代码的抽象
(语法糖)分为：
constant常量:constant初始化时机非常早，可注入到config，其他服务不能
value变量:纯数据无行为
service服务：只new一次，不需参数
factory工厂：类/函数，自己new实例/调用
provider供应商：需要全局配置
创建服务
.factory('name',function(){
return{
'username':function(x){...}
}
});
<==>
.provider('myService', {
$get: function() {
return {
'username': 'auser'
};
}
});
.service('name',constructor);
constructor构造函数，通过new关键字来实例化服务对象
var Person = function($http) {
this.getName = function() {
return $http({ method: 'GET', url: '/api/user'});
};
};
.provider('name',aProvider);
aProvider对象/函数/数组:
函数：
function(x){...}
数组：数组的最后一个元素应该是函数
对象：
{
favoriteColor: null,
setFavoriteColor: function(newColor) {
this.favoriteColor = newColor;
},
// $get函数可以接受injectables
$get: function($http) {
return {
'name': 'Ari',
getFavoriteColor: function() {
return this.favoriteColor || 'unknown';
}
};
}
如果希望服务可以被注入到config()函数，必须用provider()来定义服务
可以在多个应用使用同一个服务时获得更强的扩展性，特别是在不同应用或开源社区之间共享服务时
.constant('name',value);
常量服务可以将一个已经存在的变量值注册为服务，并将其注入到应用的其他部分/配置函数如controller,config
.value('name',value);
值不能注入到配置函数中
通常情况下，可以通过value()来注册服务对象或函数，用constant()来配置数据
$provide.decorator('name',fn)
提供了在服务实例创建时对其进行拦截的功能，可以对服务进行扩展，或者用另外的内容完全代替它
angular.foreach(objs,function(data,index,array){
//array[index]
});
objs：需要遍历的集合
data:遍历时当前的数据
index:遍历时当前索引
array:需要遍历的集合，每次遍历时都会把objs原样的传一次。
伯乐在线案例：
导航菜单：
<body ng-app>
<nav class="{{active}}" ng-click="$event.preventDefault()">
<a href="#" class="home" ng-click="active='home'">home</a>
<a href="#" ng-click="active='projects'" class="projects">projects</a>
<a href="#" ng-click="active='services'" class="services">services</a>
<a href="#" ng-click="active='contact'" class="contact">contact</a>
</nav>
<p ng-hide="active">点击菜单选择</p>
<p ng-show="active">{{active}}</p>
</body>
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
内联编辑器：
<body ng-app>
<div ng-controller="myctrl" ng-click="hideTooltip()">
<div class="tooltip" ng-show="isshow" ng-click="$event.stopPropagation()">
<input type="text" ng-model="value">
</div>
<p ng-click="write($event)">{{value}}</p>
</div>
<script>
function myctrl($scope){
$scope.value='edit';
$scope.isshow=false;
$scope.write=function(e){
e.stopPropagation();
$scope.isshow=true;
};
$scope.hideTooltip=function(){
$scope.isshow=false;
};
}
</script> 订单表单：ng-class,angular.forEach(objs,fn)
<body ng-app>
<div ng-controller="myctrl">
<h1>sewices</h1>
<ul>
<li ng-repeat="service in services" ng-class="{active:service.active}" ng-click="toggleActive(service)">
<h4>{{service.name}}</h4>
<span>{{service.price|currency:'$'}}</span>
</li>
<div>
<h4>Total:</h4>
<span>{{total()|currency:'$'}}</span>
</div>
</ul>
</div> function myctrl($scope){
$scope.services=[
{'name':'web development','price':300,'active':false},
{'name':'design','price':400,'active':false},
{'name':'integration','price':250,'active':false},
{'name':'training','price':250,'active':false}
];
$scope.toggleActive=function(s){
s.active=!s.active;
};
$scope.total=function(){
var len=$scope.services.length,
total=0;
while(len>0){
var service=$scope.services[--len];
service.active&&(total+=service.price);
}
return total;
};
}
或
$scope.total = function(){
var total = 0;
angular.forEach($scope.services, function(s){
if (s.active){
total+= s.price;
}
});
return total;
};
即时搜索：自定义searchString过滤器
<body ng-app="app">
<div ng-controller="myctrl">
<div class="search">
<input type="text" ng-model="searchString" p;aceholder="enter words">
</div>
<ul>
<li ng-repeat="i in items|search:searchString">
<a href="#"><img ng-src="img/{{i.href}}"></a>
<p>{{i.text}}</p>
</li>
</ul>
</div>
<script>
var app=angular.module('app',[]);
app.filter('search',function(){
return function(arr,searchString){
if(!searchString) return arr;
var result=[];
angular.forEach(arr,function(item){
if(item.text.toLowerCase().indexOf(searchString)!==-1) result.push(item);
});
return result;
};
});
app.controller('myctrl',function($scope){
$scope.items=[
{
'href':'featured_4-100x100.jpg',
'text':'50 Must-have plugins for extending Twitter Bootstrap',
},
{
'href':'featured_4-100x100.jpg',
'text':'Making a Super Simple Registration System With PHP and MySQL'
},
{
'href':'featured_4-100x100.jpg',
'text':'Create a slide-out footer with this neat z-index trick'
},
{
'href':'featured_4-100x100.jpg',
'text':'How to Make a Digital Clock with jQuery and CSS3'
}
];
});
</script>