• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS服务service用法总结

AngularJS服务service用法总结

作者:郑浩- 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs service,angularjs中的service,angularjs用法,angularjs 服务,angularjs自定义服务等相关知识,郑浩- 希望在学习及工作中可以帮助到您

本文实例总结了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();
}])

</div>

我们在使用$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;
    }
  });
})

</div>

上面这两种实现方式达到的效果是一样的,所以我们在使用的时候可以任意选择一种来实现。

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'
    }
  })
});

</div>

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'
    }
})

</div>

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('验证通过');
    }
  };
});

</div>

服务validate是来验证数据是否合法的功能,但是它需要依赖另外一个服务remoteData来获得数据,但是在factory的参数中,我们可以直接传入服务remoteData,ng的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:

app.factory('validate',['remoteData',function(remoteDataService){
  return function(){
    if(remoteDataService.name=='n'){
      alert('验证通过');
    }
  };
}]);

</div>

小结

以上是小编在学习angularJS服务的一些总结,这些都是入门的知识,在这和大家分享一下,如果想要对服务有更深层的理解还需要我们在项目中好好的研究。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

</div>

您可能想查找下面的文章:

  • AngularJS服务service用法总结
  • AngularJS入门教程之服务(Service)

相关文章

  • 2017-05-30浅谈Angular的$q, defer, promise
  • 2017-05-30AngularJs ng-repeat 嵌套如何获取外层$index
  • 2017-05-30AngularJS学习笔记之ng-options指令
  • 2017-05-30AngularJS学习第一篇 AngularJS基础知识
  • 2017-05-30AngularJS中的$watch(),$digest()和$apply()区分
  • 2017-05-30详解AngularJS验证、过滤器、指令
  • 2017-05-30Angular 根据 service 的状态更新 directive
  • 2017-05-30AngularJS基础 ng-model-options 指令简单示例
  • 2017-05-30AngularJS基础 ng-repeat 指令简单示例
  • 2017-05-30AngularJs 常用的过滤器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS中的模块详解
    • AngularJS基础 ng-include 指令简单示例
    • AngularJS入门教程之静态模板详解
    • 使用AngularJS来实现HTML页面嵌套的方法
    • angular ngClick阻止冒泡使用默认行为的方法
    • AngularJS入门教程之链接与图片模板详解
    • Angularjs 基础入门
    • 详解AngularJS 路由 resolve用法
    • AngularJS基础 ng-cut 指令介绍及简单示例
    • 理解AngularJs指令

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有