详解Angular中的自定义服务Service、Provider以及Factory


Posted in Javascript onApril 22, 2017

背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能重复的方法,脸都发绿了,不过还是耐心地跟我指出提高Angular代码复用性需要Service、Provider和Factory三种复用性很高的方法,遂习之,以下是我的学习成果:

先说说Factory:

通过注册.factory('my注册名',方法()),返回一个对象,你就能在控制器中引入这个方法并访问这个对象:
例子:

<!-- factory模式 -->
  <div ng-controller="theFactoryCtrl">
    <h3>Factory模式</h3>
    <ul>
      <li ng-repeat="i in names">
        {{i}}
      </li>
    </ul>

  </div>

JS代码:

/*工厂模式,注入参数中调用的是这个函数里的返回值*/
  app.factory("myFactory",function(){

    var args = arguments;
    var obj = {}

    obj.exec = function(){
      var arr = [];
      for(let i = 0; i<arguments.length; i++){
        arr.push(arguments[i]);
      }
      return arr;
    }
    return obj;
  })
app.controller("theFactoryCtrl",function ($scope,myFactory) {

    $scope.names = myFactory.exec("张三的歌","赵四的舞","老王贼六");

  })

效果:

详解Angular中的自定义服务Service、Provider以及Factory

Service:

在service使用构造函数的方法去用它,在控制器中是以new的方式引入,所以可以调用service中定义的属性

HTML:

<!-- service模式 -->
  <div ng-controller="theServiceCtrl">
    <h3>Service模式</h3>
    <p>prop:{{prop}}</p>
    <p>num:{{num}}</p>
  </div>

JS:

app.controller("theServiceCtrl",function($scope,myService){
    $scope.prop = myService.prop("呵呵");
    $scope.num = myService.num;
  })
/*Service是new出来的,所以可以直接调用里面的属性*/
  app.service("myService",function(){
    this.num = Math.floor(Math.random()*10);//0到10的随机数
    this.prop = function(arg){
      return arg;
    };
  })

效果:

详解Angular中的自定义服务Service、Provider以及Factory

Provider:

如果你想在创建服务之前先对服务进行配置,那么你需要provider,因为provider可以通过定义config,并在$get中访问config
HTML:

<!-- provider模式 -->
  <div ng-controller="theProviderCtrl">
    <h3>Provider模式</h3>
    <p>姓名:{{info.name}}</p>
    <p>部队:{{info.squad}}</p>
    <p>职务:{{info.role}}</p>
  </div>

JS:

/*使用$get方法关联对应的config*/
  app.provider("myProvider",function(){

    this.$get = function(){

      return {
        name : "朱子明",
        squad : "八路军386旅独立团",
        role : this.roleSet

      }
    }

  })
  /*名字必须符合规范:xxxxxxProvider*/
  app.config(function(myProviderProvider){
    myProviderProvider.roleSet = "保卫干事"
  })
app.controller("theProviderCtrl",function($scope,myProvider){
    $scope.info = {
      name : myProvider.name,
      squad : myProvider.squad,
      role : myProvider.role

    }
  })

效果:

详解Angular中的自定义服务Service、Provider以及Factory

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
Ionic2调用本地SQlite实例
Apr 22 #Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 #Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 #Javascript
AngularJS的脏检查深入分析
Apr 22 #Javascript
在node中如何使用 ES6
Apr 22 #Javascript
JS实现异步上传压缩图片
Apr 22 #Javascript
You might like
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
webpack打包js的方法
2018/03/12 Javascript
vue小白入门教程
2018/04/02 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
导游词之长城八达岭
2019/09/24 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android