AngularJS1.0的使用总结笔记------004

来源：互联网发布：mac系统更新10.10 编辑：程序博客网时间：2024/05/17 22:59

今天讲一下，angularjs的ngResource模块的使用，在使用之前首先需要引入这个文件

我的代码如下:HTML 部分

<!DOCTYPE html><html ng-app="myApp" lang="en"><!--- ng-app ? html 浏览器如何知道这个html是angularjs的程序 ----><head>    <meta charset="UTF-8">    <title>Title</title>   <!-- <script src="js/angular-route.min.js"></script>-->    <script src="js/angular.min.js"></script>    <script src="js/angular-resource.min.js" type="text/javascript" charset="utf-8"></script></head><body ng-controller="myController">  <!------  使用ng-controller指令 使用控制器 ------->    <input type="button"  value="get请求数据" ng-click="doGet()">    <input type="button" value="get 请求 config" ng-click="doGetConfig()">    <input type="button" value="query 请求 config" ng-click="doQuery()">    {{ result }}</body></html>

JavaScript的代码：

<script>    var app = angular.module('myApp', ['ngResource']); // 依赖ngSanitize 第三方的模块 组件    app.controller('myController', ['$scope', '$http',  '$resource',   function ($scope, $http, $resource) {        //get请求：get query 方法        //post 请求： save方法        $scope.doGet = function () {        console.log('======');    //用于检测代码是否执行到这来            var url = 'http://localhost:8000/visit?name=Tom'            var res = $resource(url);//构建好了resource对象           // $scope.result = res.get();// 异步的方法         //   console.log($scope.result.name); //undefine            res.get(function (data) {                $scope.result = data;                console.log($scope.result.name)            });        }        $scope.doGetConfig = function () {                console.log(123);            //:visit 变量 这里的param是个变量参数            var url = 'http://localhost:8000/:param';            var res = $resource(url,{                param: 'visit',                name: '@Tom', //这里把Tom @成一个变量                age:40            });            $scope.result = res.get({Tom: 'cat'});        }        $scope.doQuery = function () {        console.log('456');            var url = 'hello.json'            var res = $resource(url);//构建好了resource对象            //get只能请求一条数据            //query请求多条数据            res.query(function (data) {                $scope.result = data;            });        }    }]);</script>

在JavaScript部分，我们首先声明

var app = angular.module('myApp', ['ngResource']);并注入ngResource模块。

然后我们就可以使用这个模块来进行数据交互了。

$resource服务本身是一个创建资源对象的工厂
var res=$resource('/api/users/:userId',{userId:'@id'});

可以把res对象理解成同RESTful的后端服务进行交互的接口。

res的请求方法有多种，包含：

{

　　“get”:{method:“get”},

　　“save”:{method:“post”}

　　“query”:{method:“get”,isArray:true}

　　“remove”:{method:“delete”}

　　“delete”:{method:“delete”}

}

各个方法的请求数据的类型和多少上面代码说的很清楚了。get请求通常被用来获取单个资源。query向指定URL发送一个GET请求，并期望返回一个JSON格式的资源对象集合。

query()和get()方法之间唯一的区别是AngularJS期望query()方法返回数组。当然我这里只是简单的给大家介绍一下angularjs的这个模块的使用，其他方法，可以参考更详细的API。下一节我们讲讲angularjs的指令，这个也是angularjs的一大特点。

0 0