1、服务service
ng内置了很多服务$http,$location等,我们使用的时候直接将它们注入到controller、指令或者其他服务中即可。
自定义服务:
自定义服务的方法有三种:使用系统内置的$provide服务、使用module的factory方法、使用module的service方法。这里我们使用service方法。
app.service('serviceName',function(){
this.name='XXXX';
})
service方法本身返回一个构造器,系统会自动使用new关键字来创建出一个对象。
说明:controller和factory方法都允许数组作为第二个参数,在数组中要显示的声明参数名称与服务名称不一致的问题,但controller要注意注入的顺序要一致!
2、过滤器filter
ng内置了9种过滤器:currency(货币)、date(日期)、filter(子串匹配)、json(格式化JSON对象)、limitTO(限制个数)、lowercase(小写)、uppercase(大写)number(数字)、orderBy(排序)
filter的两种使用方法:
①在模板中使用filter
{{expression | filter}}
{{expression | filter1 | filter2 | ...}}
{{expression | filter:argument1:argument2|...}}
<span ng-repeaat="item in array | filter"></span>
②在controller和service中使用filter
使用的方法就是依赖注入。
app.controller('ctrlName',function($scope,filterName){
//....
})
这样的话有一个问题啊,那要是我使用多个filter,难不成要一个一个引入??
方法:使用$filter
app.controller('ctrlName',function($scope,$filter){
$scope.num=$filter('currency')(12345);
$scope.date=$filter('date')(new Date());
//...
})
自定义过滤器:使用module的filter方法
app.filter('filterName',function(){
return function(input,args1,...){
//处理逻辑
return result;
};
});
3、ng的路由机制
路由是一个单独的模块,包括四部分内容:
$routeProvider,定义一个路由表,即地址栏与视图模板的映射
$routeParams,保存地址栏的参数,例如{id:1,name:'tom'}
$route,完成路由配置
ngView,用来在主视图中加载子视图的区域
使用:
①引入文件并注入依赖
var app=angular.module('myApp',['ngRoute']);
②定义路由表
function routeConfig($routeProvider){
$routeProvider.when('/show',{
controller:showCtrl,
templateUrl:'show.html',
}).when('/put/:name',{
controller:putCtrl,
templateUrl:'put.html'
});
}
两个核心方法:when(path,route)和otherwise(params)
其中route参数是一个对象,包括:
controller //function或者string类型
controllerAs //string类型,指定的控制器别名
template //function或者string类型,这部分内容将被ngView引用
templateUrl //function或者string类型,
resolve //指定当前控制器所依赖的其他模块
redirectTo //重定向的地址
③视图中指定加载子视图的位置
<ng-view></ng-view>