这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 AngularJS 服务 service 用法, 结合实例形式总结分析了服务 Service 的概念、功能及自定义服务的相关操作技巧, 需要的朋友可以参考下
本文实例总结了 AngularJS 服务 service 用法。分享给大家供大家参考,具体如下:
引言
最近在项目中用到了关于 AngularJS 中的服务相关的知识,在起初学习这个东西的时候就了解到这个东西在项目中是经常被用到的,在 angular 中也是比较重要的一块,所以今天小编就总结一些关于 service 的知识。
认识 Service
关于 service 我们一点都不陌生,不论实在 c# 中还是 Java 中我们经常会遇到 service 的概念,其实 service 的作用就是对外提供某种特定的功能,也就是我们经常说的 "为了实现某个功能而调用哪个服务" 是一样的道理,他们一般是一个独立的模块,ng 服务是这样的定义的:
Angular services are singletons objects or functions that carry out specific tasks common to web apps.
1、它是一个单利对象或函数,对外提供特定的功能。
2、它与我们自己定义一个 function 然后在其他地方调用不同,因为服务被定义在一个模块中,所以它的作用范围是可以被我们来管理的,ng 避免全局变量污染意识是非常强的。
自定义服务
在 angular 中为我们提供了三种不同的方式来实现自定义服务,他们分别是系统内置的 $provider、module 中的 service 和 module 中的 factory,下面来看看如何使用这三种方式;
1)$provide 的使用
Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider
- var m1 = angular.module('myApp', [],
- function($provide) {
- $provide.provider('providerService01',
- function() {
- this.$get = function() {
- return {
- message: 'this is providerService01'
- }
- }
- }) $provide.provider('providerService02',
- function() {
- this.$get = function() {
- var _name = '';
- var service = {};
- service.setName = function(name) {
- _name = name;
- }
- service.getName = function() {
- return _name
- }
- return service;
- }
- })
- }) m1.controller('firstController', ['$scope', 'providerService01', 'providerService02',
- function($scope, providerService01, providerService02) {
- console.log(providerService01);
- providerService02.setName("李四");
- $scope.name = providerService02.getName();
- }])
我们在使用 $provide 的使用可以像上面这样直接在 module 中直接注入 $provide,然后再 module 中依次定义多个服务,当然我们也可以利用 config 来完成服务的定义。
- var m1 = angular.module('myApp', []);
- m1.config(function($provide) {
- $provide.provider('providerService01',
- function() {
- this.$get = function() {
- return {
- message: 'this is providerService011'
- }
- }
- });
- $provide.provider('providerService02',
- function() {
- this.$get = function() {
- var _name = '';
- var service = {};
- service.setName = function(name) {
- _name = name;
- }
- service.getName = function() {
- return _name
- }
- return service;
- }
- });
- })
上面这两种实现方式达到的效果是一样的,所以我们在使用的时候可以任意选择一种来实现。
2)factory 的使用
Factory 方法直接把一个函数当成一个对象的 $get 方法可以直接返回字符串,用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。
- var m1 = angular.module('myApp', [],
- function($provide) {
- $provide.factory('factoryService01',
- function() {
- return {
- message: 'this is providerServices01'
- }
- })
- });
factory 的使用比 $provide 的使用简单一些,可以在 factory 直接返回已给对象,不在使用 $get 来实现对象的返回。并且 $factory 和 $provide 不仅仅可以返回一个对象还可以返回一个任意的字符串。
3)service 的使用
Service 是用 "new" 关键字实例化的。因此,你应该给 "this" 添加属性,然后 service 返回 "this"。你把 service 传进 controller 之后,在 controller 里 "this" 上的属性 就可以通过 service 来使用了
- $provide.service('service01',function(){
- return{
- message:'this is providerServices01'
- }
- })
service 和 factory 的使用是非常相似的,但是 service 是不能返回字符串的,而 factory 既可以返回对象也可以返回任意的字符串。
三者的区别:provider 需要借助 $get 来实现,而其余的两者都不需要。series 不能返回字符串,而其他的两个都可以返回。
服务之间的依赖关系
我们在实现某个功能的时候也许需要多个服务相互依赖才可以完成,那么对于服务之间的关系我们就需要来管理,例如我们在完成一个数据验证的功能,这是在 jsFiddle 中找的一个非常简单的小例子
- var app = angular.module('MyApp', []);
- app.controller('testC3',
- function($scope, validate) {
- $scope.validateData = validate;
- });
- app.factory('remoteData',
- function() {
- var data = {
- name: 'n',
- value: 'v'
- };
- return data;
- });
- app.factory('validate',
- function(remoteData) {
- return function() {
- if (remoteData.name == 'n') {
- alert('验证通过');
- }
- };
- });
服务 validate 是来验证数据是否合法的功能,但是它需要依赖另外一个服务 remoteData 来获得数据,但是在 factory 的参数中,我们可以直接传入服务 remoteData,ng 的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng 是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:
- app.factory('validate',['remoteData',function(remoteDataService){
- return function(){
- if(remoteDataService.name=='n'){
- alert('验证通过');
- }
- };
- }]);
小结
以上是小编在学习 angularJS 服务的一些总结,这些都是入门的知识,在这和大家分享一下,如果想要对服务有更深层的理解还需要我们在项目中好好的研究。
希望本文所述对大家 AngularJS 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0524/329633.html