发表于: 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还是不怎么会用。。用不好。



返回列表 返回列表
评论

    分享到