Angular服务service、过滤器filter、路由机制ngRoute

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>

猜你喜欢

转载自blog.csdn.net/LiyangBai/article/details/81539981