Last active
March 17, 2016 02:31
-
-
Save guo-yu/5908791 to your computer and use it in GitHub Desktop.
使用Angular进行ngResource模块的注入，并组织一个Store模块进行数据的获取，写入和分析
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html(ng-app="app") | |
| head | |
| title demo | |
| body | |
| #wrap(ng-controller="myCtrl") | |
| h1 我是 {{me.name}} , 我已经 {{me.age}} 岁了 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 注册app | |
| var app = angular.module('app', ['store']); | |
| // 定义这个数据仓库 | |
| var store = angular.module('store', ['ngResource']).factory('Store', function($resource) { | |
| return { | |
| // define user api | |
| user: $resource('/user/:id', {id:'@uid'}), | |
| // define article api | |
| article : $resource('/article/:id', {id:'@aid'}), | |
| // define jsonp api | |
| remote : $resource('/remoteData/:id', {id:'@rid'},{ | |
| jsonp :{ | |
| method:'JSONP', | |
| params:{ | |
| yourKey: 'yourValue' | |
| } | |
| } | |
| }) | |
| } | |
| }) | |
| // 在ctrler里使用这个Store获取数据 | |
| var myCtrl = function($scope, Store) { | |
| // fetch a user target | |
| var user = Store.user.get({uid:123}, function() { | |
| // 填入数据 | |
| $scope.me = user; | |
| // 写入新数据 | |
| user.abc = true; | |
| // 会执行post请求 | |
| user.$save(); | |
| // console.log this user | |
| console.log(user) | |
| }); | |
| }) |
是这样的：
- 首先在需要使用到的dom上声明app，比如在html标签上声明：html(ng-app="app")
- 然后再需要用到的dom上绑定ctrl，比如 #header(ng-controller="myCtrl")
- 这样这个dom其实就和这个ctrl的 $scope 进行了绑定。你可以在这个ctrl 里利用这个 Store进行数据操作，然后填入到 $scope 里，angular会自动对dom进行更新。
解释几个疑问：
- 需要在注册模块的时候声明依赖，我这里忘写了，也可以写在最后。
- $resource('/article/:id', {id:'@uid'}) 是一个对象，这个对象有许多原型方法，通过这些配置，决定了Store模块会请求这个url
/article/:id'，这个 :id 如果你用过express ，会发现这是一个placeholder，这个placeholder 在哪里使用呢？下边这个uid，就是我们刚才声明的placeholder. 本质是为了在使用原型方法的时候传参。
var user = Store.user.get({uid:123}, function() {
user.abc = true;
// 会执行post请求
user.$save();
// console.log this user
console.log(user)
});
- user.abc = true 是在修改拿到数据的值，然后再使用原型方法$save直接POST请求该url提交数据。免除再写回调。
- 默认回调是成功时候的状态，失败的情况是最后一个回调（默认是不写的）
var user = Store.user.get({uid:123}, function() {
user.abc = true;
// 会执行post请求
user.$save();
// console.log this user
console.log(user)
},function(err){
console.log(' request fail !!!! ')
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
问题是几个关键点没有理解,官方的文档也解说的比较零碎,
俺猜对应的 dom 应该是:
最后也忘记了:
是也乎?!
其实 $resource 理解困难的无非是几处:
相比 $http $resource 齐整很多,但是,综合起来,目前,俺绕不清楚,,,