【AngularJS】——核心特性之服务

最新推荐文章于 2023-02-26 17:36:08 发布

杨晓敏M

最新推荐文章于 2023-02-26 17:36:08 发布

阅读量625

点赞数

分类专栏： ------【Android】 ▶总结提高 AnglularJS 文章标签： angularJS 服务

本文链接：https://blog.csdn.net/u010924897/article/details/51012278

版权

▶总结提高同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

------【Android】

8 篇文章 0 订阅

订阅专栏

AnglularJS

5 篇文章 0 订阅

订阅专栏

在之前几篇文章中，提到了AngularJS几个核心特性，今天继续来看看ng的服务（service）。

1、简单介绍

首先服务是一个单例，即无论这个服务被注入到任何地方，对象始终只有一个实例。
其次这与我们自己定义一个function然后在其他地方调用不同，因为服务被定义在一个模块中，所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。

ng提供了30多个内置的服务，可以到API中 https://docs.angularjs.org/guide/di 以及Service API中https://docs.angularjs.org/api/ng/service进行查看学习。我们依靠ng的依赖注入机制把服务注入到controller、指令或者是其他服务中，对服务进行使用。

2、定义服务

如同指令一样，系统内置的服务以$开头，我们也可以自己定义一个服务。定义服务的方式有如下几种：

※ 使用Module的factory方法

※ 使用Module的service方法

※使用系统内置的$provide服务

用代码说明如下：

var yxmTestServices = angular.module('yxmTestServices', []);  
  
yxmTestServices.factory('facetorytest', ['$window',         //factory方式  
    function($window){  
        var test = {  
            firstname:"san",  
            lastname:function(){  
                return "zhang";  
            }  
        };  
        $window.alert('aaaa');         //内置服务可以注入  
        return test;  
    }  
]);  
  
yxmTestServices.service('servicetest', ['$window',          //service方式  
    function($window){  
        $window.alert('bbbb');        //内置服务可以注入  
        this.firstname = "san";  
        this.lastname = function(){  
            return "zhang";  
        }  
    }  
]);  
  
yxmTestServices.provider('providertest',[                  //provider方式，内置服务不可以注入  
    function(){  
        this.test = {  
            "firstname":"san",  
            "lastname":"zhang"  
        }  
        this.$get = function () {  
            return this.test;  
        };  
    }  
]);

3、服务调用

congtroller调用定义模块，controller.js

//以注入的方式来调用yxmTestControllers.controller('TestCtrl',['$scope',"facetorytest","servicetest","providertest",  
    function($scope,facetory111,service111,provider111) {     //自定义,服务名称  
        $scope.facetorytest = facetory111.firstname+" "+facetory111.lastname();  
        $scope.servicetest = service111.firstname+" "+service111.lastname();  
        $scope.providertest = provider111.firstname+" "+provider111.lastname;  
    }  
]);

创建app.js把service和controller结合到一起。app.js

/* App Module */  
  
var yxmTestApp = angular.module('yxmTestApp', [  
    'ngRoute',  
    'yxmTestControllers',     //上面定义的controller  
    'yxmTestServices'         //上面自定义的服务  
]);

HTML调用显示

<!doctype html> 
<html lang="en" ng-app="yxmTestApp">
<head>

//各种引用

</head>
<body >  
  
  <div ng-controller="TestCtrl">  
     <p>{{facetorytest}}</p>  
      <p>{{servicetest}}</p>  
      <p>{{providertest}}</p>  
  </div>  
  
</body>  
</html>

值得注意的是，Angular services依赖注入的规范：自定义的service要写在内建的Angular services之后，自定义的service之间是没有先后顺序的。

杨晓敏M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
【AngularJS】——核心特性之服务

在之前几篇文章中，提到了AngularJS几个核心特性，今天继续来看看ng的服务（service）。 1、简单介绍首先服务是一个单例，即无论这个服务被注入到任何地方，对象始终只有一个实例。其次这与我们自己定义一个function然后在其他地方调用不同，因为服务被定义在一个模块中，所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。
复制链接

扫一扫

专栏目录