• AngularJS内建服务以及自定义服务的用法


    在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用。接下来介绍几种比较常用的内建服务以及自定义服务的方法。

    [内建服务]

    (1)location服务

         location服务返回当前页面的地址,需要注意的是location服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。

     >>>代码部分

    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p> 当前页面的url:</p>
    <h3>{{myUrl}}</h3>
    </div>
    <p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
    </body>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $location) {
        $scope.myUrl = $location.absUrl();
    });
    </script>
    </html>

    (2)$http服务

    $http服务: 服务向服务器发送请求,应用响应服务器传送过来的数据。

    >>>代码部分

     1 <div ng-app="myApp" ng-controller="myCtrl"> 
     2 <p>欢迎信息:</p>
     3 <h1>{{myWelcome}}</h1>
     4 </div>
     5 <p> $http 服务向服务器请求信息,返回的值放入变量 "myWelcome" 中。</p>
     6 <script>
     7 var app = angular.module('myApp', []);
     8 app.controller('myCtrl', function($scope, $http) {
     9   $http.get("welcome.htm").then(function (response) {
    10       $scope.myWelcome = response.data;
    11   });
    12 });
    13 </script>

    (3) $timeout服务

    AngularJS $timeout 与 JS window.settimeout 函数相对应,实现效果相同

    代码如下>>>

    1 var app = angular.module('myApp', []);
    2 app.controller('myCtrl', function($scope, $timeout) {
    3     $scope.myHeader = "Hello World!";
    4     $timeout(function () {
    5         $scope.myHeader = "How are you today?";
    6     }, 2000);
    7 });

    代码所执行的效果是,2s后执行代码。

    (4)$interval服务

    AngularJS $interval 与 JS window.settimeinterval 函数相对应,实现效果相同

    1 var app = angular.module('myApp', []);
    2 app.controller('myCtrl', function($scope, $interval) {
    3     $scope.theTime = new Date().toLocaleTimeString();
    4     $interval(function () {
    5         $scope.theTime = new Date().toLocaleTimeString();
    6     }, 1000);
    7 });

    【自定义服务】

    1、service

    1 angular.module("app",[])
    2         .controller("ctrl",function($scope,$hexafy){})
    3 .service('$hexafy', function() {
    4             this.$$gongneng = "将转入的数字,转为16进制";
    5             this.myFunc = function (x) {
    6                 return x.toString(16);
    7             }
    8         })

    2、factory

    factory 是一个函数用于返回值,通常我们使用 factory 函数来计算或返回值。(factory使用上,与service差距不大)

     1 angular.module("app",[])
     2         .config()
     3         .controller("ctrl",function($scope,hexafy){
     4             $scope.gongneng = hexafy.gongneng;
     5             $scope.num = hexafy.myFunc(255);
     6         })
     7         .factory('hexafy',function(){
     8             var obj = {
     9                 gongneng : "将转入的数字,转为16进制",
    10                 myFunc:function(x){
    11                     return x.toString(16);
    12                 }
    13             };
    14             return obj;
    15         })

    3、provider

    1、在AngularJS中,Service,factory都是基于provider实现的。
    2、在provider中,通过$get()方法提供了factory的写法,用于返回 value/service/factory。;
    3、provider是三种自定义服务中,唯一可以写进config配置阶段的一种。
    如果服务,必须要在配置阶段执行,那么必须使用provider。否则,一般使用Service或factory

     1 .controller("ctrl",function($scope,hexafy){
     2             $scope.gongneng = hexafy.gongneng;
     3             $scope.num = hexafy.myFunc(255);
     4         })
     5         
     6         /*定义一个provider服务*/
     7         .provider('hexafy',function(){
     8             //默认使用Service的写法
     9 //            this.gongneng = "将转入的数字,转为16进制";
    10             this.$get = function(){
    11                 var obj = {
    12                     gongneng : "将转入的数字,转为16进制",
    13                     myFunc : function(x){
    14                         return x.toString(16);
    15                     }
    16                 }
    17                 return obj;
    18             }
    19         })
  • 相关阅读:
    使用RequireJS优化Web应用前端
    基线样式
    css层叠顺序
    摘录android工具类
    android中相关的图形类
    Google Android SDK开发范例------------20141119
    将博客搬至CSDN
    LightOJ1356 最大独立集 HK算法 素数分解
    求二分图最大匹配——Hopcroft-Krap算法
    HDU 6333 莫队分块 + 逆元打表求组合数
  • 原文地址:https://www.cnblogs.com/GlenLi/p/6822806.html
Copyright © 2020-2023  润新知