发表于: 2017-06-16 22:36:36
2 951
今天做了啥/收获
ngResource
我的大多数控制器方法看起来像这样:
$scope.addTodo = function() {
var description = $scope.newTodo.description;
$http.post('/todo.json', { description: description }).success(function() {
$scope.newTodo.description = '';
$location.path("list");
});
这是一个非常简单的实现。但是,如果服务器上实现RESTful API Angular可以轻松地使用ngResource。
以下是Angular文档中的描述:
一个创建资源对象的工厂,可以让您与REST式的服务器端数据源进行交互。
返回的资源对象具有提供高级行为的操作方法,而不需要与低级$ http服务交互。
这意味着如果我们正确使用ngResource(并且我们有一个RESTful API),我们的角色代码中不应该看到任何$ http调用。
使用ngResource
要开始使用,我们需要引用资源库。
http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js
当我们创建我们的应用程序时,我们还需要指定对资源模块的依赖。
var todoApp = angular.module('todoApp', ['ngResource'])
现在我们需要为资源创建一个工厂函数(我们可以直接在控制器中创建资源),但这样做更为简单。
todoApp.factory('todoFactory', function($resource) {
return $resource('/todo/:todoId', { todoId:'@_id' });
});
$资源功能的第一个参数是服务器端资源的URL。指定URL参数:todoId应该默认为对象上的_id属性(如果存在)。这实际上有点怪异,有点凌乱。记住,我在服务器上使用Mongo - Mongo对象在转换为JSON时将默认使用_id属性(而不是id)。如果在一个真实的应用程序中这样做,我可能会使用像Rabl的视图来确保JSON表示具有id属性而不是_id,但是现在它工作得很好。
可以在控制器中参考我们的工厂。
function TodoController($scope, $location, todoFactory) {
所有的服务器端互动现在都成为一线。以下是加载所有todo项目而不使用ngResource的代码。
function loadTodos() {
$http.get('/todo.json').success(function(data) {
$scope.items = data;
});
}
这是使用ngResource的代码。
function loadTodos() {
$scope.items = todoFactory.query()
}
添加一个todo项目而不使用ngResource的代码。
$scope.addTodo = function() {
var description = $scope.newTodo.description;
$http.post('/todo.json', { description: description }).success(function() {
$scope.newTodo.description = '';
$location.path("list");
});
}
这是使用ngResource的等效代码。
$scope.addTodo = function() {
todoFactory.save($scope.newTodoModel, backToList);
}
问题。。ngResprce还是不怎么会用。。用不好。
评论