• 21.自定义服务


    转自:https://www.cnblogs.com/best/tag/Angular/

    自定义服务

    AngularJS在内置服务中提供了大量的功能,不过这些服务不一定能满足你的需求,你可以通过自定义服务解决。可以将服务看作一个或多个相关任务的一块可重用代码。

    创建自定义服务有4种主要类型:value,constant,factory,service

    1.2.1、创建value服务

    定义单个值的简单服务,模块的配置阶段是不可以使用的。
    module.value('key',{color:'blue',value:'17'})

    1.2.2、创建constant服务

    也value服务一样,不过在模块的配置阶段是可以使和的。

    module.value(“key”,”value”);

    1.2.3、创建factory服务

    提供了把功能实现到服务中的能力。

    也可以把其它服务注入到factory中。

    1.2.4、创建Service服务

    factory是普通function,而service是一个构造器(constructor),这样Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,所以factory可以返回任何东西,而service可以不返回

    示例代码:

     1 <!DOCTYPE html>
     2 <!--指定angular管理的范围-->
     3 <html ng-app="app01">
     4     <head>
     5         <meta charset="UTF-8">
     6         <title>服务</title>
     7     </head>
     8     <body>
     9         <!--指定控制器的作用范围-->
    10         <form ng-controller="Controller1" name="form1">
    11             <p>
    12                 半径:<input ng-model="r" ng-init="r=1"/>
    13             </p>
    14             <p>
    15                 周长:{{circleLength}}
    16             </p>
    17             <p>
    18                 面积:{{circleArea}}
    19             </p>
    20         </form>
    21         <!--引入angularjs框架-->
    22         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
    23         <script type="text/javascript">
    24             //定义模块,指定依赖项为空
    25             var app01 = angular.module("app01", []);
    26             
    27             //value服务
    28             app01.value("i",100);
    29             
    30             //constant服务
    31             app01.constant("PI",3.14);
    32             
    33             //factory服务
    34             app01.factory("getArea",['i','PI',function(i,PI){
    35                 return function(radius){
    36                     return PI*(radius+i)*(radius+i);
    37                 };
    38             }])
    39             
    40             function circleMethod(i,PI,getArea){
    41                 this.getLength=function(radius){
    42                     return 2*PI*radius;
    43                 };
    44                 this.getSize=function(radius){
    45                     return getArea(radius);
    46                 }
    47             }
    48             //service服务
    49             app01.service("circleService",circleMethod);
    50             
    51             //定义控制器,指定控制器的名称,$scope是全局对象
    52             app01.controller("Controller1", function($scope,circleService) {
    53                 $scope.$watch("r",function(){
    54                     $scope.circleLength=circleService.getLength($scope.r);
    55                     $scope.circleArea=circleService.getSize($scope.r);
    56                 });
    57             });
    58         </script>
    59     </body>
    60 </html>

    运行结果:

  • 相关阅读:
    非数字验证(Javascript)
    JavaScript 调用WSS
    定制列表编辑页面
    sharepoint 页面定制经验小结
    div 滚动条样式大集合
    char、varchar、text和nchar、nvarchar、ntext的区别
    javascript去处空格
    ADHelper类与扩展应用
    【转】ASP.NET页面刷新方法大集合
    MOSS2007删除失败的SSP ?
  • 原文地址:https://www.cnblogs.com/sharpest/p/8134111.html
Copyright © 2020-2023  润新知