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

 更新时间:2018年09月30日 10:58:02   作者:泠泠在路上  
今天小编就为大家分享一篇对angularJs中2种自定义服务的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

本篇文章介绍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种自定义服务的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Angular ng-animate和ng-cookies用法详解

    Angular ng-animate和ng-cookies用法详解

    本文讲一下Angular中动画应用的部分。这篇文章主要介绍了Angular ng-animate和ng-cookies用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angular 4.0学习教程之架构详解

    Angular 4.0学习教程之架构详解

    作为一种大受欢迎的Web应用程序框架,Angular终于迎来了版本4.0,下面这篇文章主要给大家介绍了关于Angular 4.0学习教程之架构的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • 在 Angular 中使用Chart.js 和 ng2-charts的示例代码

    在 Angular 中使用Chart.js 和 ng2-charts的示例代码

    本篇文章主要介绍了在 Angular 中使用Chart.js 和 ng2-charts的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • AngularJS基于ui-route实现深层路由的方法【路由嵌套】

    AngularJS基于ui-route实现深层路由的方法【路由嵌套】

    这篇文章主要介绍了AngularJS基于ui-route实现深层路由的方法,涉及AngularJS路由嵌套操作相关实现步骤与技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS中使用ng-repeat的index问题

    AngularJS中使用ng-repeat的index问题

    这篇文章主要介绍了AngularJS中使用ng-repeat的index问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • AngularJS全局警告框实现方法示例

    AngularJS全局警告框实现方法示例

    这篇文章主要介绍了AngularJS全局警告框实现方法,结合实例形式分析了AngularJS全局警告框的实现步骤与相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • Angular使用Restful的增删改

    Angular使用Restful的增删改

    今天小编就为大家分享一篇关于Angular使用Restful的增删改,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • 详细AngularJs4的图片剪裁组件的实例

    详细AngularJs4的图片剪裁组件的实例

    本篇文章主要介绍了详细AngularJs4的图片剪裁组件的实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AngularJS初始化过程分析(引导程序)

    AngularJS初始化过程分析(引导程序)

    这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下
    2014-12-12
  • AngularJS表格添加序号的方法

    AngularJS表格添加序号的方法

    这篇文章主要介绍了AngularJS表格添加序号的方法,涉及AngularJS表格的遍历及序号添加实现技巧,需要的朋友可以参考下
    2017-03-03

最新评论