AngularJS内置了$http这个服务来与后台联系。(默认会把接受到的数据转换为json)当然,还有一个$resource来提供与RESTful后台联系的服务。

$http服务
    $http比较简单,下面是$http的常规用法
    $http.get(url,[config])
    .success(function(data,status,headers,config){
        ...
    })
    .error(function(data,status,headers,config){
        ...
    });
    $http还有下面的API:
    $http.post(url[,data,config])
    $http.put(url[,data,config])
    $http.get(url,[config])
    $http.delete(url[,config])
    $http.head
    $http.jsonp(url[,config])   //用来跨域联系
    注意到在post和put方法签名中还有个data的参数,它用来传递需要往服务器发送的数据,他是{}类型的对象,config也是{}类型的对象,可以包含下面的属性
    $http({
        method:string,
        url:string,
        params:object,   //精确来讲类型是一个key-value的map
        data:string or object,
        headers:object,
        transformRequest:function (data,headersGetter){...} or an array of functions,
        transformResponse:function(data,headersGetter){...} or an array of functions,
        cache:boolean or Cache object,
        timeout:number,
        withCredentials:boolean
    });
    
$service服务
    $service包装了$http,让AngularJS可以使用RESTful风格编程。
    看下面的例子:
    module.factory('User',['$resource',function($resource){
        return $resource('/user/:userId/card/:cardId',
                         {userId:'123',cardId:'@id'},
                         {charge:{
                            method:'POST',
                            params:{charge:true},
                            isArray:false
                         }});
    }]);
    可以看到,$resource的签名如下:
    $resource(url[,defaultParameters,addtionalActions])

1.例子中url是'/user/:userId/card/:cardId',当中有两个奇怪的东西:‘:userId’和‘:cardId’。 意思是这个url是不完整的,一会儿要用defaultParameters中的userId和cardId属性值来分别代替这两个东西。如果找不到就会用空字符串代替
    2.例子中defaultParameters是-- {userId:'123',cardId:'@id'},仍然有奇怪的东西:cardId:'@id'。意思是我现在也不知道是什么东西,但是一会儿使用User这个服务是会传参数过来,我会在参数里面找属性为id的值,并把它给cardId用。(这是最后也会传到url中的:cardId)
    3.addtionalActions可以定义一些别的API。以后再说
    那么在使用User这个服务时有如下的对应表:
      调用的方法                    发送的url
    User.get({id:1})           /user/123/card/1   
    User.save({},uuser)        /user/123/card
    User.query()               /user/123/card
    User.query({id:1})         /user/123/card/1
    User.delete({id:1})        /user/123/card/1
    (像上面的query我们可以直接赋值给其他变量,如var users=User.query())

AngularJs(Part 5)--与后台联系的更多相关文章

  1. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  2. 通过AngularJS实现前端与后台的数据对接(一)——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  3. AngularJs $http.post 数据后台获取不到数据问题 的解决过程

    第一次使用 AngularJs 的 $http 模块的时候,遇到过后台获取不到前台提交数据的问题,检查代码没有发现问题,先上代码. js 代码 angular.module("newsApp ...

  4. angularjs制作的iframe后台管理页切换页面

    <code> <!DOCTYPE html><html lang="zh" ng-app><head> <meta chars ...

  5. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  6. AngularJS从构建项目开始

    AngularJS从构建项目开始 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框 ...

  7. 快速搭建Web环境 Angularjs + Express3 + Bootstrap3

    快速搭建Web环境 Angularjs + Express3 + Bootstrap3 AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统.angula ...

  8. angularjs的forEach使用

    最近一直在写angularjs中的http后台数据交互,存在的问题就是数据传输中数据格式的问题,如何将传输过来的数据转化为自己需要的数据.当然如果你会一点后台语言的话,完全可以用在后台把数据转化为需要 ...

  9. AngularJS最理想开发工具WebStorm

    http://blog.fens.me/angularjs-webstorm-ide/ Angularjs插件下载地址:http://plugins.jetbrains.com/plugin/6971 ...

随机推荐

  1. Yii的权限管理rbac

    1.首先我们要在配置文件的组件(component)里面配置一下 Rbac 在对应项目下的config/main.php或者config/main-local.php下添加 'authManager' ...

  2. 实现RTSP网站微信直播方案EasyNVR(linux版)部署问题之:ERR_CONTENT_LENGTH_MISMATCH

    发现问题: 想要优化一下EasyNVR相关功能,内部测试软件,于是在linux系统中部署了一台EasyNVR.当部署好,运行起来发现问题: EasyNVR的配置页面数据出不来. 分析问题: 基于是we ...

  3. AWS:3. S3

    主要内容 1.S3入门 2.S3安全性 对象 权限 访问策略 3.S3实战--BAAS 应用与定价 S3入门 S3概念 S3是simple storge server简单存储服务 相当于网盘,例如百度 ...

  4. ABAP-创建客户

      CALL METHOD CMD_EI_API=>MAINTAIN_BAPI FUNCTION Z_CS_RFC_OA002 . *"------------------------ ...

  5. gon

    gem 'gon' application.html 中添加 =include_gon action中 gon.activities = @activities js中 gon.activities

  6. mybatis中xml字段空判断及模糊查询

    由于业务特殊的查询需求,需要下面的这种查询,一直感觉模糊不清,本地测试一下顺便做个总结 贴一段xml代码,如下: <if test="receivedName != null and ...

  7. codeforces 112B Petya and Square

    B. Petya and Square time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. listen 57

    Secondhand Smoke Exposure Doubled Asthmatic Kids' Hospital Readmissions If your child has asthma哮喘, ...

  9. hadoop集群的安装

    Hadoop集群安装 1.配置JDK环境和设置主机名,本地解析 JDK环境教程: http://www.cnblogs.com/wangweiwen/p/6104189.html 本地解析: vim ...

  10. TF-IFD算法及python实现关键字提取

    TF-IDF算法: TF:词频(Term Frequency),即在分词后,某一个词在文档中出现的频率. IDF:逆文档频率(Inverse Document Frequency).在词频的基础上给每 ...