服务(Angularjs很多方法都是服务组成的)

1.使用service方法创建的单例服务

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<div ng-controller="detail">

    <input type="number" ng-model="x">

    <input type="number" ng-model="y">

    <button  ng-click="add()">总和</button>

    <br />

    <label>{{z}}</label>

</div>

<script>

  angular.module('app.service', [])

  .config(['$provide',function($provide){

    $provide.service('calc',[function(){

        this.plusnum="";

        this.add = function(x,y) {

           this.plusnum+="+";

           return x+y+this.plusnum;

        }

    }]);

  }]);

  angular.module('app', ['app.service'])

  .controller('detail',['$scope','calc',function($scope,calc) {

      angular.extend($scope,{

          x:0,y:0,z:0

      });

      $scope.add=function(){

          $scope.z=calc.add($scope.x,$scope.y);

      }

  }]);

  angular.bootstrap(document, ['app']);

</script>

</html>

$scope加属性的时候切莫使用scope={x:0},会覆盖掉原来的对象，让功能失效,
因为是一个实例,所以每次调用服务plusnum都会存在上一次的

2.使用factory方法创建服务

<html>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>

<div ng-controller="detail">

    <input type="number" ng-model="x">

    <input type="number" ng-model="y">

    <button  ng-click="add()">总和</button>

    <br />

    <label>{{z}}</label>

</div>

<script>

  angular.module('app.service', [])

  .config(['$provide',function($provide){

    $provide.factory('calc', [function(){

        return {add :function(x,y) {

               return x+y;

            }

        }

    }]);

  }]);

  angular.module('app', ['app.service'])

  .controller('detail',['$scope','calc',function($scope,calc) {

      angular.extend($scope,{

          x:0,y:0,z:0

      });

      $scope.add=function(){

          $scope.z=calc.add($scope.x,$scope.y);

      }

  }]);

  angular.bootstrap(document, ['app']);

</script>

</html>

用factory方法创建一个服务,需要返回值，否则就是undefined，
如果是方法使用的时候需要实例化或者直接返回一个对象，上面的例子是直接返回对象

3.使用服务的时候也许会用到$http请求或者使用资源ngResource,资源具体下一个点滴,$http和ajax类似使用简单不过前题是要注入参数

  angular.module('app.service', [])

  .config(['$provide',function($provide){

    $provide.service('test',['$http',function($http){

        this.test = function() {

           var config={

               method:'jsonp',

               url:'http://geoip.weather.com.cn/g/',

               headers :{},

               data :{a:'test'},

               cache :false,

               transformRequest:function(data, headersGetter),

               transformResponse:function(data, headersGetter),

               xsrfHeaderName:'',

               xsrfCookieName :'',

               withCredentials:true,

               timeout :'1000',

               responseType :'json',

           };

           $http(config);

           .success(function(){}))

           .error(function(){})

        }

    }]);

  }]);

基本配置和ajax类似,也可以直接使用$http.get(url,config)这些来调用,其中主要区别是getJSON和jsonp的方法名称,以及几个不常用的方法$http.head$http.post$http.put$http.delete

  1. 其中xsrfHeaderName和xsrfCookieName、withCredentials主要用来跨域的时候验证,不在angularjs范围内
    具体内容可以参考HTTP access control
  2. 其中transformRequest和transformResponse的参数是一个方法或者一个数组的方法

Ⅳ.AngularJS的点点滴滴-- 服务的更多相关文章

  1. Ⅴ.AngularJS的点点滴滴-- 资源和过滤

    资源ngResource(依赖ngResource模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ ...

  2. Ⅲ.AngularJS的点点滴滴-- 路由

    路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

  3. AngularJs之六（服务）

    服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location  服务,  $http 服务 ...

  4. 让AngularJS的$http 服务像jQuery.ajax()一样工作

    让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...

  5. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  6. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  7. Ⅱ.AngularJS的点点滴滴--缓存

    模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...

  8. Ⅰ.AngularJS的点点滴滴--引导

    AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 页面引导实例化 1.自动实例化 <html> <script ...

  9. 怎么理解angularjs中的服务？

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

随机推荐

  1. XSS与字符编码的那些事儿

    目录 0x00:基本介绍 0x01:html实体编码 0x02:新增的实体编码 实体编码变异以及浏览器的某些工作原理! 0x03:javascript编码 0x04:base64编码 0x05:闲扯 ...

  2. 【BZOJ 1191】 [Apio2010]特别行动队 （斜率优化）

    dsy1911: [Apio2010]特别行动队 [题目描述] 有n个数,分成连续的若干段,每段的分数为a*x^2+b*x+c(a,b,c是给出的常数),其中x为该段的各个数的和.求如何分才能使得各个 ...

  3. [wikioi]线段覆盖 2

    http://wikioi.com/problem/3027/ # 有个小错误调了半天,最终发现sort(line, line+N)错了,后面那个是exclusive的,所以要line+N+1.# 按 ...

  4. bzoj1597

    首先不难想到排序,这种无规律的东西一般都要转化为有规律才好做 首先以x为第一关键字,y为第二关键字升序排序 拍完序我们发现,若存在两块土地i,j x[i]<=x[j],y[i]<=y[j] ...

  5. JSONP跨域的原理解析（转）

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...

  6. HDU 5963 朋友 【博弈论】 (2016年中国大学生程序设计竞赛（合肥）)

    朋友 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem Descr ...

  7. struts2错误：The Struts dispatcher cannot be found.

    struts2错误:The Struts dispatcher cannot be found. The Struts dispatcher cannot be found. This is usua ...

  8. Linux之sed详解

    转载:http://blog.chinaunix.net/u/22677/showart_1076318.html   1.简介 sed是非交互式的编辑器.它不会修改文件,除非使用shell重定向来保 ...

  9. SQL SERVER 自定义函数 整数转成指定长度的16进制 转换成指定长度的16进制 不足补0

    最近做项目扩展的时候,遇到问题就是将整型转换成指定长度的16进制 刚开始就是直接使用 cast(12 as varbinary(4))但是发现这个不能解决我的问题 所以就上网搜了一下,然后改了改,下面 ...

  10. Cubieboard编译安装NodeJS经验总结

    Cubieboard编译安装NodeJS经验总结,以供新手免走弯路. Cubieboad用的是arm处理器,NodeJs的编译安装上不像pc上那么简单,可以一遍过. 单单make编译一次,就得几乎一个 ...