在介绍AngularJS自定义服务之前，我们先来了解一下AngularJS~

学过HTML的人都知道，HTML是一门很好的伪静态文本展示设计的声明式语言，但是，要构建WEB应用的话它就显得乏力了。

而AngularJS是为了克服HTML在构建应用上的不足而设计的。

AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。它有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……

AngularJS通过新的属性和表达式扩展了HTML；可以构建一个单一页面应用程序；而且学习起来非常简单。

有了以上的了解，我们来看一下AngularJS中的自定义服务。

angularjs中可通过三种方式自定义服务，

分别为$service，$factory，$provider。

下面我就给大家分别介绍一下三种AngularJS自定义服务的区别：

一、服务service

第一次被注入时实例化，只实例化一次，整个应用的生命周期中是个单例模式，可以用来在controller之间传递数据；

使用new关键字实例化，所以直接使用this定义service，如果你不知道原因，就看看js中的this。
例如：

 .service('myService', ['', function() {

 this.getName = function() {

 return 'CooMark';

 }

 }])

内置服务：
>>> 使用内置服务,必须在Controller中通过函数的参数注入进来！！！！！

$location：返回当前页面的 URL地址。
$http:向服务器发送请求，应用响应服务器传送过来的数据,类似于Ajax
$timeout：相当于setTimeout();
$interval：相当于setInterval();

（参考代码）body部分：

 <body ng-app="app" ng-controller="ctrl">

     <p>[功能]<br />

        {{gongneng}}

     </p>

     <p>255转为16进制为:{{num}}</p>

 </body>

（参考代码）JS部分：

先导入JS文件angular.js！！！

 <script src="libs/angular.js"></script>
     <script>

         angular.module("app",[])

         .controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){

 //          $scope.local = $location.$$absUrl;

 //          $scope.local = $location.absUrl();

             $scope.local = $location.$$host;

             $timeout(function () {

                 $scope.myHeader = "How are you today?";

             }, 2000);

             $scope.num = 0;

             $interval(function(){

                 $scope.num ++;

             },1000);

             $scope.gongneng = $hexafy.$$gongneng;

             $scope.hexafy = $hexafy;

         })

         /*自定义服务*/

         .service('$hexafy', function() {

             this.$$gongneng = "将转入的数字，转为16进制";

             this.myFunc = function (x) {

                 return x.toString(16);

             }

         })

         /*自定义过滤器*/

         .filter("filt",function(){

             return function(x){

                 return x.toString(16);

             }

         })

         /*在过滤器中，调用自定义服务*/

         .filter("filt1",function($hexafy){

             return function(x){

                 return $hexafy.myFunc(x);

             }

         })

     </script>

二、服务factory

factory是一个函数用于返回值，通常我们使用factory函数来计算或返回值。

factory使用上，与service差距不大。

（参考代码） body部分参考服务Service，JS代码如下：

先导入JS文件angular.js！！！

 <script src="libs/angular.js"></script>

     <script>

         angular.module("app",[])

         .config()

         .controller("ctrl",function($scope,hexafy){

             $scope.gongneng = hexafy.gongneng;

             $scope.num = hexafy.myFunc(255);

         })

         .factory('hexafy',function(){

             var obj = {

                 gongneng : "将转入的数字，转为16进制",

                 myFunc:function(x){

                     return x.toString(16);

                 }

             };

             return obj;

         })

 </script>

三、服务provider

1、在AngularJS中，Service，factory都是基于provider实现的。
2、在provider中，通过$get()方法提供了factory的写法，用于返回 value/service/factory。；
3、provider是三种自定义服务中，唯一可以写进config配置阶段的一种。

如果服务，必须要在配置阶段执行，那么必须使用provider。否则，一般使用Service或factory。

四、扩展：angularjs的依赖注入和自定义服务有什么区别

AngularJS实际上是在调用前面出现的代码（就是$provide.provider的版本）。

从字面上来说，angularjs的依赖注入和自定义服务基本上没有差别。

value方法也一样，如果我们需要从$get函数（也就是我们的factory函数）返回的值永远相同的话，

我们可以使用value方法来编写。

好了~~~今天的博客内容就先分享到这里，欢迎留言~~~

大家一起加油哦！一起学习，一起进步！

【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？的更多相关文章

  1. AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  2. 深究AngularJS——自定义服务详解(factory、service、provider)

    前言 3种创建自定义服务的方式.  Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...

  3. angularJs 自定义服务 provide 与 factory 的区别

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  4. AngularJs:Service、Factory、Provider依赖注入使用与区别

           本教程使用AngularJS版本:1.5.3        AngularJs GitHub: https://github.com/angular/angular.js/       ...

  5. 跟我学AngularJs:Service、Factory、Provider依赖注入使用与差别

    林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka        本教程使用AngularJs版本号:1.5.3        AngularJ ...

  6. Android系统在新进程中启动自定义服务过程（startService）的原理分析

    在编写Android应用程序时,我们一般将一些计算型的逻辑放在一个独立的进程来处理,这样主进程仍然可以流畅地响应界面事件,提高用户体验.Android系统为我们提供了一个Service类,我们可以实现 ...

  7. anjular中Service、Factory、Provider的使用与js中创建对象的总结

    在学习anjular中Service的使用时,发现和js中的创建对象的方式有一定的联系,所以总结了anjular中Service.Factory.Provider的使用方式与js创建对象的方式 一.先 ...

  8. AngularJS中service，factory，provider的区别（转载：http://my.oschina.net/tanweijie/blog/295067）

    目录[-] 一.service引导 二.service 1.factory() ‍2.service()‍ ‍3.provider()‍‍ 一.service引导 刚开始学习Angular的时候,经常 ...

  9. AngularJS中service，factory，provider的区别

    一.service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别.This is whe ...

随机推荐

  1. [SinGuLaRiTy] 树形存储结构阶段性测试

    [SinGuLaRiTy-1011] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. G2019级信息奥赛专项训练 题目 程序名 时间 内存 ...

  2. 老李案例分享：MAT分析应用程序服务出现内存溢出过程

    老李案例分享:MAT分析应用程序服务出现内存溢出过程   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest的loa ...

  3. 手机自动化测试：Appium源码分析之跟踪代码分析五

    手机自动化测试:Appium源码分析之跟踪代码分析五   手机自动化测试是未来很重要的测试技术,作为一名测试人员应该熟练掌握,POPTEST举行手机自动化测试的课程,希望可以训练出优秀的手机测试开发工 ...

  4. poj 2369 Permutations (置换入门)

    题意:给你一堆无序的数列p,求k,使得p^k=p 思路:利用置换的性质,先找出所有的循环,然后循环中元素的个数的lcm就是答案 代码: #include <cstdio> #include ...

  5. Android下使用busybox的ifconfig

    busybox ifconfig eth0 10.0.16.45 netmask 255.255.254.0 broadcast 10.0.16.186busybox route add defaul ...

  6. JavaWeb总结(五)—Cookie

    一.会话 1.提出问题 HTTP协议是一种无状态的协议.Web服务器本身不能识别哪些请求是同一浏览器发出的,浏览器的每一次请求都是孤立的.即使HTTP1.1支持持续连接,但当用户有一段时间没有提交请求 ...

  7. 1113: 零起点学算法20——输出特殊值II

    1113: 零起点学算法20--输出特殊值II Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitted: 207 ...

  8. select下拉二级联动

    function opt(){ var id = $("#ids").val(); $.ajax({   type: "POST",  url: "$ ...

  9. ES6 深入let的作用域

    说到ES6的let变量声明,我估计很多人会想起下面几个主要的特点: 没有变量声明提升 拥有块级作用域 暂时死区 不能重复声明 很多教程和总结基本都说到了这几点(说实话大部分文章都大同小异,摘录的居多) ...

  10. java映射(map用法)

    主要分两个接口:collection和Map 主要分三类:集合(set).列表(List).映射(Map)1.集合:没有重复对象,没有特定排序方式2.列表:对象按索引位置排序,可以有重复对象3.映射: ...