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代码
Mar 05 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
mysql中存储过程、函数的一些问题
2007/02/14 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Scrapy的简单使用教程
2017/10/24 Python
import的本质解析
2017/10/30 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python如何实现图片压缩
2020/09/11 Python
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
2014年母亲节演讲稿范文
2014/05/07 职场文书
服务承诺书范文
2014/05/19 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
搞笑婚前保证书
2015/02/28 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python