AngularJS基于factory创建自定义服务的方法详解


Posted in Javascript onMay 25, 2017

本文实例讲述了AngularJS基于factory创建自定义服务的方法。分享给大家供大家参考,具体如下:

为什么要创建自定义服务?

很简单,不想让控制器显得过于“臃肿”,而且服务可复用。针对性强,每个服务对应不同的功能。

这里介绍如何使用factory创建自定义服务,并且使用他。

例子1:

<!--HTML-->
<div ng-controller="showTheName">
  <h1 ng-bind="name"></h1>
</div>
/*js*/
var app = angular.module("routingDemoApp",[]);
app.factory("showName",function(){
  var NameFactory = {};
  NameFactory.name = "张三";
  return NameFactory;
});
app.controller("showTheName",function($scope,showName){
  $scope.name = showName.name;
});

使用factroy来创建一个服务和创建一个控制器非常像,只是创建服务需要返回这个服务的对象。这里的对象就是NameFactory 。一般的写法是在函数的一开始就创建一个变量对象,而后在进行对象里面属性以及方法的设置,最后返回这个对象即可。

在控制器使用自定义的服务与使用AngularJS自带的服务几乎一样,只是名字的前面没有美元($)符号。在注入了自定义的服务后,控制器中就可以随意的使用该控制器返回的对象的属性和方法了。

自定义服务还有个更强大的玩法,就是在创建自定义服务的同时将已经创建好的服务注入。以上一篇博文的基础为例,使用自定义服务来实现读取AJAX文件。(JSON文件可参考前面一篇《AngularJS读取JSON及XML文件的方法》,这里不给出了)

<!--html-->
<div class="panel panel-default" ng-controller="AjaxJson">
  <div class="panel-body">
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <td>名</td>
        <td>种类</td>
        <td>价格</td>
        <td>保质期</td>
      </tr>
      </thead>
      <tbody>
      <tr ng-hide="products.length">
        <td colspan="4" class="text-center">没有数据</td>
      </tr>
      <tr ng-repeat="item in products">
        <td ng-bind="item.name"></td>
        <td ng-bind="item.category"></td>
        <td ng-bind="item.price"></td>
        <td ng-bind="item.expiry"></td>
      </tr>
      </tbody>
    </table>
    <p><button ng-click="LoadJson()">加载JSON数据</button></p>
  </div>
</div>
/*JS*/
app.factory("loadJSON",function($http,$q){
  var loadJson ={};
  loadJson.loadjson = function(){
    var d = $q.defer();
    $http({
      url:"json.json",
      method:"GET"
    })
      .success(function(response){
      d.resolve(response);
    })
      .error(function(){
        d.reject(alert("出错"));
      });
    return d.promise;
  };
  return loadJson;
});
app.controller("AjaxJson",function($scope,loadJSON){
  $scope.LoadJson = function () {
    loadJSON.loadjson().then(function(data){
      $scope.products = data;
    },function(){
      alert("出错");
    })
  }
});

步骤如下:

1)将$http,$q 注入到匿名函数中。
2)创建一个变量对象,命名为loadJson。
3)在该对象中创建一个方法,命名为loadjson()。
4)创建一个变量d,赋予它$q.difer()方法。
5)使用http({})创建一个promise对象,并返回该promise对象。
6)返回ladJson对象。服务创建完毕。
7)在控制器中注入该服务,使用then()方法对自定义服务返回的承诺进行操作。

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

Javascript 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
js下弹出窗口的变通
Apr 18 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 #Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
基于VUE选择上传图片并页面显示(图片可删除)
May 25 #Javascript
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 #Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 #Javascript
vue-router实现webApp切换页面动画效果代码
May 25 #Javascript
You might like
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python表格存取的方法
2018/03/07 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python yield和Generator函数用法详解
2020/02/10 Python
logging level级别介绍
2020/02/21 Python
python如何进入交互模式
2020/07/06 Python
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
活动志愿者自荐信
2014/01/27 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技
app场景下uniapp的扫码记录
2022/07/23 Java/Android