5.服务

作者: miner敏儿 | 来源:发表于2017-05-27 13:08 被阅读0次

    依赖注入

    AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用
    这导致了使用者和被使用者之间存在依赖关系。
    所谓依赖注入是指在运行时自动查找依赖关系
    然后将查找到依赖传递给使用者的一种机制。

    1.行内式注入

    以数组形式明确声明依赖,数组元素都是包含依赖名称的字符串,数组最后一个元素是依赖注入的目标函数
    推荐使用行内式注入.

    2.推断式注入

    没有明确声明依赖,AngularJS会将函数参数名称当成是依赖的名称
    这种方式会带来一个问题,当代码经过压缩后函数的参数被压缩,这样便会造成依赖无法找到。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body ng-app='app' ng-controller="zmController">
    
    <input type="text" ng-model="msg">
    <h1>{{msg}}</h1>
    <script src=angular.js></script>
    <script>
      /*1.创建模板*/
      var app=angular.module('app',[]);
      /*2.创建控制器*/
    //    行内式注入
      app.controller("zmController",["$scope",function($scope){
    /*因为我依赖$scope这个模块先找$scope,找到了就直接传递给function中的参数
    * function中的$scope可以更改
    * */
        $scope.msg="zm"
      }])
    
    //    推断式注入
      app.controller("zmController1",function($scope){
    /*前面没有
    * 先根据名称尝试找有没有$scope  有,就拿来用 但是当代码发布时会压缩代码,构建工具会自动修改参数的名称 就找不到$scope
    * 
    * */
              $scope.msg="zm1"
      })
      /*3.绑定模板*/
      /*4.绑定控制器*/
    </script>
    </body>
    </html>
    

    什么是服务

    angular在一开始就帮我们定义一些功能。我可以直接使用这些功能。都是一个方法或者一个对象的形式来调用指定的功能。想要使用这些服务。必须得要注入。所谓服务是将一些通用性的功能逻辑进行封装方便使用,AngularJS允许将自定义服务。

    内置服务:

    
    $location
    $log
    $timeout $interval
    $http 
    $filter
    angular允许开发自己根据自己的需求来自定义自己的功能。
    
    
    image.png image.png

    location服务 image.png

    url是锚点之后的url

    hash值是第二个锚点之后的hash值

    内置指令

    自定义指令

     app.directive("zm",function(){
        return{
            restrict : 'EA',
            template:'',
            replace:true,
            tranclude:true
        }
     })
    

    内置过滤器

    自定义过滤器

    本质:就是一个方法

     app.filter("filterName",function(){
            return function (input) {
            }
        });
    

    内置服务

    自定义服务

    本质:就是一个对象,也可以以方法的形式存在

    目的:把公用的功能,给封装到一起,进行复用.

    $scope.url=location.url();

    service自定义服务

    直接挂在this上使用

    1.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src=angular.js></script>
    <script>
        /*1.创建模块*/
        var app = angular.module('app',[]);
        /*2.创建控制器*/
        app.controller("zmController",["$scope","zmService",function($scope,zmService){
            zmService.say();
    
            $scope.curTime=zmService.showDateTime();
    
        }])
    
        /*3.绑定模板*/
        /*4.绑定控制器*/
    
        /*内置指令*/
        /*自定义指令*/
        app.directive("zm",function(){
            return{
                restrict : 'EA',
                template:'',
                replace:true,
                tranclude:true
            }
        })
        /*内置过滤器*/
        /*自定义过滤器
        * 本质:就是一个方法
        * */
        app.filter("filterName",function(){
            return function (input) {
            }
        });
    
        /*内置服务*/
        /*自定义服务
        * 本质:就是一个对象,也可以以方法的形式存在
        * $scope.url=location.url();
        * */
    
        /*系统内置服务前面喜欢加$符,自己可以不用*/
    /*    app.service('zmService',function(){
            /!*可以往里面写方法*!/
            this.say=function () {
                console.log("hello");
            }/!*可以自定义好多个方法*!/
            this.showTime = function(){
                var cutTime = new Date();
                //我要过滤当前的时间
                /!*我还要依赖其他服务,所以要注入到当前服务中*!/
            }
        })*/
    
        app.service('zmService',["$filter",function($filter){
            /*可以往里面写方法*/
            this.say=function () {
                console.log("hello");
            }/*可以自定义好多个方法*/
            this.showDateTime = function(){
                var curTime = new Date();
                //我要过滤当前的时间
                /*我还要依赖其他服务,所以要注入到当前服务中*/
                var date= $filter('date');
                return date(curTime,"yyyy-MM-dd")
            }
        } ])
    
    </script>
    <body ng-app='app' ng-controller='zmController'>
    
            <p>{{curTime}}</p>
    
    </body>
    </html>
    
    image.png

    factory自定义服务

    return一个对象

    3.png
    <script src=angular.js></script>
    <script>
        /*1.创建模块*/
        var app = angular.module('app',[]);
        /*2.创建控制器*/
        app.controller("zmController",["$scope","zmService","myService",function($scope,zmService,myService){
            zmService.mySay();
            zmService.myTime();/*key值 key值变化,他就要变化*/
            myService();
        }])
        /*系统内置服务前面喜欢加$符,自己可以不用*/
        /*1.调用形式  服务的名称.方法名称*/
        app.factory('zmService',function() {
            /*可以往里面写方法*/
            function showDateTime(){
                console.log("show Time");
            }
            function say(){
                console.log("hello");
            }
            return{
                myTime:showDateTime,/*key:value  key:服务调用的方法名称  value 自己在内容声明的方法名称*/
                mySay:say,
            }
        })
    
        /*想使用必须要注入*/
        /*可以直接调用服务名称
        * 2.调用形式使用   服务名称()
        * */
        app.factory('myService',function(){
            return function(){
                console.log('执行了myService');
            }
        })
    </script>
    <body ng-app='app' ng-controller='zmController'>
    
    </body>
    </html>
    

    1.先自定义服务 系统内置服务前面喜欢加$符,自己可以不用

    两种方式:

    • 1.调用形式 服务的名称.方法名称

    • 2.调用形式使用 服务名称()

    2.在控制器中注入使用

    3.在页面展示出来

    demo使用三种方式

    • 1.服务名称 直接调用形式
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src=angular.js></script>
    <script>
        /*1.创建模块*/
        var app = angular.module('app',[]);
        /*2.创建控制器*/
        app.controller("zmController",["$scope","$http","formData",function($scope,$http,formData){
     <!--$http({-->
    <!--     url:"post.php",-->
     <!--     method:'post',-->
      <!--     //我现在就想在传递data数据时,传递参数方式只用传一个参数就行,向下面一样,但是这种方法是不允许的所以我想自己封装一个formData的格式-->
    <!--     data:{-->
      <!--         name:'zm',-->
     <!--         age:23-->
    <!--         }-->
     当自己封装好以后的时候,就可以拿来用了
    使用的格式是:
        data:formData(
           name:'zm',
           age:23
           })
          <!-- })-->
          
            /*把对象格式转成formDate形式
             { 
             name:'zm',
             age:23
             }
             name=zm&&age=23
             * */
             
            formData({
                name:"zm",
                age:23
            })
        }])
        app.factory('formData',function(){
            return function(obj){ //传入一个对象
                var res = '';
                for (key in obj){
                    res+=key +"=" +obj[key] + "&";
                }
                res = res.slice(0,-1); //切割掉最后的&符号
                console.log(res);
                return res;
    
            }
        })
    </script>
    <body ng-app='app'  ng-controller='zmController'>
    </body>
    </html>
    

    打印输出:name=zm&age=23

    • 2.服务的名称.方法名称
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src=angular.js></script>
    <script>
        /*1.创建模块*/
        var app = angular.module('app',[]);
        /*2.创建控制器*/
    //    1. 2
    //    app.controller("zmController",["$scope","$http","formParamsZm",function($scope,$http,formParamsZm){
            app.controller("zmController",["$scope","$http","formPortParams",function($scope,$http,formPortParams){
            //2
            var params = {
                name:"zm",
                age:23
            }
            
             formPortParams.postForm(params);
    
    
        }])
    
        /*3.绑定模板*/
        /*4.绑定控制器*/
    
    
            app.factory('formPortParams',function(){
    
              function formPortParams(obj){
                    var res = '';
                    for (key in obj){
                        res+=key +"=" +obj[key] + "&";
                    }
                    res = res.slice(0,-1);
                    console.log(res);
                    return res;
    
                }
                return {
                  postForm:formPortParams
                }
    
            })
    
    </script>
    <body ng-app='app' ng-controller='zmController'>
    
    </body>
    </html>
    
    • 3.可以使用service自定义服务
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src=angular.js></script>
    <script>
        /*1.创建模块*/
        var app = angular.module('app',[]);
        /*2.创建控制器*/
        app.controller("zmController",["$scope","$http","formParamsZm",function($scope,$http,formParamsZm){
            var params = {
                name:"zm",
                age:23
            }
            $http({
                url:"post.php",
                method:'post',
               data:formParamsZm.formZm(params)
            })
        }])
        app.service('formParamsZm',function(){
            this.formZm = function(obj){
                var res = '';
                for (key in obj){
                    res+=key +"=" +obj[key] + "&";
                }
                res = res.slice(0,-1);
                console.log(res);
                return res;
            }
        })
    </script>
    <body ng-app='app' ng-controller='zmController'>
    </body>
    </html>
    

    打印输出:name=zm&age=23

    value自定义服务

    * value 表现形式上是一个服务
    * 本质上可看做是一个常量。
    * 常量:其值始终保持不变的量。
    * 变量:其值可以发生改变的量。
    
    
    4.png
    <script src=angular.js></script>
    <script>
        /*1.创建模块*/
        var app = angular.module('app',[]);
        /*2.创建控制器*/
        //也要注入进去
        app.controller("zmController",["$scope","version","userName",function($scope,version,userName){
            console.log(version);
            console.log(userName);
    
        }])
    
        app.value('version',1.0);
        /*通过key来保存一个值*/
        app.value("userName","zm")
    
    </script>
    <body ng-app='app' ng-controller='zmController'>
    
    </body>
    </html>
    
    

    打印结果: 1.0 zm

    相关文章

      网友评论

          本文标题:5.服务

          本文链接:https://www.haomeiwen.com/subject/znhqfxtx.html