对angularJs中2种自定义服务的实例讲解


Posted in Javascript onSeptember 30, 2018

本篇文章介绍2种自定义服务的方式,一种是用factory,一种是用service

一、首先介绍使用factory来进行自定义服务

1.html

<div ng-app="module" ng-controller="ctrl">
  <table border="1" width="600">
    <tr>
      <td>网站名称</td>
      <td>网址</td>
    </tr>
    <tr ng-repeat="v in data">
      <td>{{v.name}}</td>
      <td>{{v.url}}</td>
    </tr>
  </table>
</div>
<script>
  var m = angular.module('module', []);
  //factory定义服务videoServer
  m.factory('videoServer', ['$http', function ($http) {
    return {
      /* 第一种方式      
        get: function (callback) {
        $http({url: '1.php'}).then(function (response) {
          callback(response);
        });
      }*/
      //第二种方式
      all: function () {
        return $http({url: '1.php'});
      }
    };
  }]);
  //在控制器中使用videoServer服务,与自带的服务使用方式一样
  m.controller('ctrl', ['$scope', 'videoServer', function ($scope, videoServer) {
    /*第一种方式
    videoServer.get(function (response) {
      $scope.data = response.data;
    });
    */
    //第二种方式
    videoServer.all().then(function (response) {
      $scope.data = response.data;
    });
  }]);
</script>

1.php

<?php
$data = [
  [ 'name' => '百度', 'url' => 'www.baidu.com' ],
  [ 'name' => '谷歌', 'url' => 'google.com' ],
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);

二、使用service来进行自定义服务

2.html

<div ng-app="module" ng-controller="ctrl">
  <table border="1" width="600">
    <tr>
      <td>网站名称</td>
      <td>网址</td>
    </tr>
    <tr ng-repeat="v in data">
      <td>{{v.name}}</td>
      <td>{{v.url}}</td>
    </tr>
  </table>
</div>
<script>

  var m = angular.module('module', []);
  //service自定义服务videoServer
  m.service('videoServer', ['$http', function($http){
    this.get=function(){
      return $http({method:'get',url:'2.php'}).then(function(response){
        return response.data;
      })
    }
  }])
   //在控制器中使用videoServer服务,与自带的服务使用方式一样
  m.controller('ctrl', ['$scope', 'videoServer', function ($scope, videoServer) {
    videoServer.get().then(function (data) {
      $scope.data = data;
    });
  }]);
</script>

2.php

<?php
$data = [
  [ 'name' => '百度', 'url' => 'www.baidu.com' ],
  [ 'name' => '谷歌', 'url' => 'google.com' ],
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);

以上这篇对angularJs中2种自定义服务的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
You might like
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python制作简易注册登录系统
2016/12/15 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
教师学习培训邀请函
2014/02/04 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
培训通知书模板
2015/04/17 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Win11查看设备管理器
2022/04/19 数码科技
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers