angularjs--resource

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
           {{name}}
           {{data.name}}
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module(‘myApp‘,[‘ngResource‘]);
          app.controller(‘firstController‘,[‘$scope‘,‘$resource‘,function($scope,$resource){
              var obj = $resource(‘lisi.json‘);
          $scope.data1 = obj.get();
              $scope.data = obj.get({name:‘zhangsan‘},function(data){//请求zhangsan.json
                  console.log(data);
                  console.log(data.name);
              },function(error){
                  console.log(error);
              });
              console.log($scope.data);
              $scope.name = ‘张三‘;
          }]);
      </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
           {{name}}
           {{data.name}}
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module(‘myApp‘,[‘ngResource‘]);
          app.controller(‘firstController‘,[‘$scope‘,‘$resource‘,function($scope,$resource){
              var obj=$resource(‘:name.:type‘);
            //  $scope.data=obj.get();
              $scope.data=obj.get({name:‘lisi‘,type:‘json‘},function(data){//请求lisi.json
                  console.log(data.name);
              },function(error){
                  console.log(error);
              });
            console.log($scope.data);
              $scope.name = ‘张三‘;
          }]);
      </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
           {{name}}
           {{data.name}}
             <ul>
                 <li ng-repeat="d in data">
                     {{d.name}}--{{d.age}}
                 </li>
             </ul>
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module(‘myApp‘,[‘ngResource‘]);
          app.controller(‘firstController‘,[‘$scope‘,‘$resource‘,function($scope,$resource){
              var obj=$resource(‘:name.:type‘);
            //  $scope.data=obj.get();
              $scope.data=obj.query({name:‘zhangsan‘,type:‘json‘});
             console.log($scope.data);
              $scope.name = ‘张三‘;
          }]);
      </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
           {{name}}
           {{data.name}}
             <ul>
                 <li ng-repeat="d in data">
                     {{d.name}}--{{d.age}}
                 </li>
             </ul>
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module(‘myApp‘,[‘ngResource‘]);
          app.controller(‘firstController‘,[‘$scope‘,‘$resource‘,function($scope,$resource){
              var obj=$resource(‘:name.:type‘,{type:‘json‘});
            //  $scope.data=obj.get();
              $scope.data=obj.query({name:‘zhangsan‘});
             console.log($scope.data);
              $scope.name = ‘张三‘;
          }]);
      </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
           {{name}}
           {{data.name}}
             <ul>
                 <li ng-repeat="d in data">
                     {{d.name}}--{{d.age}}
                 </li>
             </ul>
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module(‘myApp‘,[‘ngResource‘]);
          app.controller(‘firstController‘,[‘$scope‘,‘$resource‘,function($scope,$resource){
              //var obj=$resource(‘:name.:type‘,{type:‘json‘});
              var obj = $resource(‘http://www.57lehuo.com/json.php‘,
                      {id:‘@id‘},{getAge: {method: ‘GET‘, params: {age:‘40‘},isArray: false},
                          getSex: {method: ‘GET‘, params: {sex:‘nv‘,age:‘32‘},isArray: false}});
              $scope.data=obj.get({id:‘20‘});
              $scope.data2=obj.getAge({id:‘21‘});
              $scope.data3=obj.getSex({id:‘21‘});
              //$scope.data=obj.query({name:‘zhangsan‘});
              console.log($scope.data);
              console.log($scope.data2);
              console.log($scope.data3);
              $scope.name = ‘张三‘;
          }]);
      </script>
    </body>
</html>
时间: 2024-10-10 11:07:07

angularjs--resource的相关文章

AngularJS Resource:与 RESTful API 交互

REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability).REST风格体现在URL设计上: 每个URL对应一个资源 对资源的不同操作对应于HTTP的不同方法 资源表现形式(representation)通过Accept和Content-Type指定 A

angularJS $resource与后台restapi的对应关系

REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability).REST风格体现在URL设计上: 每个URL对应一个资源 对资源的不同操作对应于HTTP的不同方法 资源表现形式(representation)通过Accept和Content-Type指定 A

angularjs $resource restful api

AngularJS中的RESTful资源 palwo 发表于 2014-12-16 17:31:50 $http服务提供了一个非常低级的实现,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性.但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象. 在这些情况下,如果我们能够创建一个JS对象,而且它可以理解并代表这种对象模型,是不是会很棒?如果我们仅仅编辑这个对象的属性,例如保存或者更新,那么这些状态

angularjs $resource用法小结

备注:个人小结,仅供参考,欢迎纠正 1.注入resource var studentService =angular.module('studentServiceApp', [ 'ngAnimate', 'ngCookies', 'ngResource' ]); 2. studentService.config(['$httpProvider','app', function ($httpProvider) { $httpProvider.defaults.headers.common['Aut

黄聪:AngularJS中的$resource使用与Restful资源交互(转)

原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Re

AngularJS 学习笔记 1.皮毛

还有几天就要去就要去新公司报道了. 新公司是要用到 AngularJs的. 虽然以前简单看过. 但是没有详细了解过. 趁这几天恶补一下. 早就听说了 出了2.0. 且完全和 1.0 不一样.. 这让我很忧伤. 于是在学习之前查了一下 http://www.oschina.net/news/65407/is-angular-2-ready 似乎还在开发阶段.. 以下初步了解.  Controller 1. 不用复用Controller. 2. 不用操作Dom,尽量使用指令来完成. 3. 不用再Co

[AngularJS] AngularJS系列(6) 中级篇之ngResource

目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: method:字符串,请求方法. url:字符串,请求地址. params:字符串或者对象,将使用paramserializer序列化并且作为GET请求的参数. data:字符串或者对象,作为请求信息数据的数据. headers:对象,字符串或者函数返回表示发送到服务器的HTTP请求头.如果函数的返回值

Angularjs Nodejs Grunt 一个例子

做了一个简单的示例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境 默认nodejs已安装. 安装以下模块:express(nodejs框架),grunt(javascript task runner),grunt-contrib-watch(grunt live load插件),grunt-express-server(grunt启动express服务端插件). 命令行中进入程序目录,依次输入以下命令: npm install express 回车 npm install grunt

Angularjs Nodejs Grunt 一个样例

做了一个简单的演示样例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境 默认nodejs已安装. 安装下面模块:express(nodejs框架),grunt(javascript task runner),grunt-contrib-watch(grunt live load插件),grunt-express-server(grunt启动express服务端插件). 命令行中进入程序文件夹,依次输入下面命令: npm install express 回车 npm install gr

Make AngularJS $http service behave like jQuery.ajax()(转)

There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ($http.post(), etc.) don’t appear to be swappable with the jQuery equivalents (jQuery.post(), etc.) even though the respective manuals imply identica