• 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>

    运行结果:

  • 相关阅读:
    JeePlus:代码生成器
    JeePlus:API工具
    Java实现 洛谷 P1023 税收与补贴问题
    Java实现 洛谷 P1023 税收与补贴问题
    Java实现 洛谷 P1023 税收与补贴问题
    Java实现 洛谷 P1328 生活大爆炸版石头剪刀布
    Java实现 洛谷 P1328 生活大爆炸版石头剪刀布
    Java实现 洛谷 P1328 生活大爆炸版石头剪刀布
    Java实现 洛谷 P1328 生活大爆炸版石头剪刀布
    Java实现 洛谷 P1328 生活大爆炸版石头剪刀布
  • 原文地址:https://www.cnblogs.com/sharpest/p/8134111.html
Copyright © 2020-2023  润新知