资源ngResource(依赖ngResource模块)

<html>

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

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

<div ng-controller="detail">

    <button  ng-click="query()">query</button>

    <button  ng-click="handle()">handle</button>

</div>

<script>

angular.module('app', ['ngResource']).factory('restful', ['$resource','$q',

function($resource,$q) {

  return $resource('/:category', {

    category: '@category'

  },

  {

    query: {

      method: 'get',

      responseType: 'text',

      interceptor: {

        'response': function(response) {

          return response;

        },

        'responseError': function(rejection) {

          return $q.reject(rejection);

        }

      }

    },

    handle: {

      method: 'post',

      responseType: 'json',

      url: "/:category/:handle",

      params: {

        handle: '@handle'

      }

    }

  });

}]).controller('detail', ['$scope', 'restful',

function($scope, restful) {

  $scope.query = function() {

    restful.query({

      category: 'a'

    },

    function() {})

  };

  $scope.handle = function() {

    restful.handle({

      category: 'b',

      handle: 'c',

      a: 'e'

    },

    function() {})

  };

}]);

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

</script>

</html>

使用factory方法创建资源,里面具体的配置的参数和上一个点滴的$http一样

  1. 当点击query方法的时候看到有一个get的请求,其中如果要给前面的category赋值,
    那么必须在默认参数上面@符号表示在调用的时候赋值
  2. 当方法里面写了url的时候会覆盖原来默认的url
  3. interceptor这个是其中多出来的参数也是一种拦截吧,
    当请求结束的时候会响应相应的事件只有response和responseError

  4. 资源含有以下默认方法

    { 'get':{method:'GET'},
    
'save':{method:'POST'},
    
'query':{method:'GET',isArray:true},
    
'remove':{method:'DELETE'},
    
'delete':{method:'DELETE'}};

  5. 既然说了拦截那么，那些下面的方法是对所有http请求进行拦截的服务的创建,当要处理响应的事情的时候,
    就会进相应的方法体,有点类似ajax的ajaxSend和ajaxSuccess以及ajaxError因为都是全局的,
    其中request和response是对象请求和响应的数据进行改写,
    需要返回修改后或者创建一个新的对象、一个promise对象也可以
    模块方法如下

    angular.module('app.interceptor', []).config(['$provide', '$httpProvider',
    
function($provide, $httpProvider) {
    
$provide.factory('myHttpInterceptor',
    
function($q) {
    
 return {
    
   'request': function(config) {
    
     return config || $q.when(config);
    
   },
    
   'requestError': function(rejection) {
    
     return $q.reject(rejection);
    
   },
    
   'response': function(response) {
    
     return response || $q.when(response);
    
   },
    
   'responseError': function(rejection) {
    
     return $q.reject(rejection);
    
   }
    
 };
    
});
    
$httpProvider.interceptors.push('myHttpInterceptor');
    
}]);

    或者直接使用匿名的方法

    angular.module('app.interceptor', []).config(['$httpProvider',
    
function($httpProvider) {
    
$httpProvider.interceptors.push(function($q) {
    
 return {
    
   'request':function(config) {
    
     return config || $q.when(config);},
    
   'requestError': function(rejection) {
    
     return $q.reject(rejection); },
    
   'response': function(response) {
    
     return response || $q.when(response);
    
   },
    
   'responseError': function(rejection) {
    
     return $q.reject(rejection);
    
   }
    
 };
    
});
    
}]);

过滤$filter

<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="query">

    <label>{{query|num:'2'}}</label>

</div>

<script>

angular.module('app', [])

.filter('num', function () {

    return function (input,result) {

        return input/result;

    }

}).controller('detail', ['$scope','$filter',

function($scope,$filter) {

  console.log($filter('num')('100','2'));

  $scope.query =1

}]);

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

</script>

</html>

过滤其中input参数是当前对象的值,result是:??过滤名称的后面的值,
也可以在js中直接调用方法如上$filter('num')返回的就是过滤的方法

Ⅴ.AngularJS的点点滴滴-- 资源和过滤的更多相关文章

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

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

  2. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

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

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

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

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

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

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

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

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

  7. angularjs中的时间格式化过滤

    本地化日期格式化: ({{ today | date:'medium' }})Nov 19, 2015 3:57:48 PM ({{ today | date:'short' }})11/19/15  ...

  8. 【转载】AngularJS 用$sce服务来过滤HTML标签，解决无法正确显示后台传递的html标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  9. angularjs结合d3js实现资源展示

    转载请注明出处: 转载自Bin's Blog:  angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ ) angularjs结合d3js实 ...

随机推荐

  1. Axzue注册码

    ahjesus Axure RP 7.0注册码 用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+t ...

  2. Android4.3 蓝牙BLE初步

    一.关键概念: Generic Attribute Profile (GATT) 通过BLE连接,读写属性类小数据的Profile通用规范.现在所有的BLE应用Profile都是基于GATT的.   ...

  3. Codevs_1048_石子归并_(动态规划)

    描述 http://codevs.cn/problem/1048/  1048 石子归并 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold       题目描述 Des ...

  4. HDU 5961 传递 【图论+拓扑】 （2016年中国大学生程序设计竞赛（合肥））

    传递 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)     Problem ...

  5. Unity给力插件之Final IK

    Final IK细节: 1.Aim IK:设定一个目标,关节末端始终朝向该目标,一般用来做头部的朝向. 步骤: a.在模型头节点处添加Aim空物体并reset b.给模型添加Aim IK组件,并填上A ...

  6. 连续使用两次fread 错误和fread返回值

    今天在写一个代码,要把一帧的buffer读入到文件,因为有NEON和OpenCL两种不同的实现所以需要读取文件两次,代码如下: FILE *file; ; INTER_BLOCK_SIZE_GPU_R ...

  7. SRM 358(1-250,500pt)

    DIV1 250pt 题意:电视目前停留在第100台,有一个遥控器,可以向上或向下换台(需要按键一次),也可以按一些数字,然后直接跳到该台(需要按键次数等于数字数,不需要按确定键).但是,这个遥控一些 ...

  8. mongodb在window下和linux下的部署 和 安装可视化工具

    Windows安装    安装Mongo数据库: 在发布本文的时间官方提供的最新版本是:2.4.0 ,如果不做特殊声明,本教程所用的版本将会是这个版本. 第一步:下载安装包:http://www.mo ...

  9. linux内核--几个上下文(context)

    为了控制进程的执行,内核必须有能力挂起正在CPU上运行的进程,并恢复以前挂起的某个进程的执行,这种行为叫进程切换(process switch),任务切换(task switch)或上下文切换(con ...

  10. ArcEngine中使用上下左右键移动地图

    转自愿文ArcEngine中使用上下左右键移动地图 因项目需要,需对mapcontrol控件响应上下左右键,从网上找的方法都一样,都值提到了需要设置axMapControl1的KeyIntercept ...