摘要：我使用的是為這個(gè)示例應(yīng)用設(shè)計(jì)接口。發(fā)起一個(gè)請(qǐng)求體為的請(qǐng)求。目前只有一個(gè)可以設(shè)置。創(chuàng)建一個(gè)的應(yīng)用為了加強(qiáng)的概念我們?yōu)殡娪皭?ài)好者創(chuàng)建一個(gè)應(yīng)用。我已經(jīng)使用和創(chuàng)建了一個(gè)后端服務(wù)。創(chuàng)建每一個(gè)路由都對(duì)應(yīng)一個(gè)。

原文地址：https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource

大量的單頁(yè)應(yīng)用都有CRUD操作。如果你使用angularjs創(chuàng)建一個(gè)CRUD操作，那么你可以利用$resource服務(wù)的優(yōu)勢(shì)。$resource服務(wù)是建立在$http服務(wù)之上，并且可以使前后端用RESTful標(biāo)準(zhǔn)進(jìn)行交互變得簡(jiǎn)單的一個(gè)factory。所以，我們一起探索一下$resource,并且在angular中實(shí)現(xiàn)CRUD的操作。

$resource服務(wù)沒(méi)有打包到angularjs中。你需要下載一個(gè)獨(dú)立的文件叫angular-resource.js并且把它引入到HTML頁(yè)面中。這個(gè)文件可以從這里下載：http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js。

另外，為了使用$resource你需要在主模塊中注入ngResource模塊。示例：

angular.module("mainApp",["ngResource"]); //mainApp is our main module

$resource和 RESTful API工作。這意味著你的 URLs 應(yīng)該類(lèi)似于下面的模式：

你可以創(chuàng)建接口使用你選擇的服務(wù)器端語(yǔ)言。我使用的是Node + Express + MongoDB為這個(gè)示例應(yīng)用設(shè)計(jì)RESTful接口。創(chuàng)建好了這些URLs以后，你就可以借助于$resource與這些URLs交互。我們來(lái)看一下$resource實(shí)際上是怎么工作的。

在controller/service中使用$resource需要先聲明依賴(lài)。接下來(lái)就像下面的示例一樣，在REST端調(diào)用$resource()方法。調(diào)用方法之后返回一個(gè)$resource一個(gè)可用于與REST后端交互的資源類(lèi)：

angular.module("myApp.services").factory("Entry", function($resource) {
  return $resource("/api/entries/:id"); // Note the full endpoint address
});

方法返回的是一個(gè)資源類(lèi)對(duì)象，默認(rèn)包含下面5種方法：

get()

query()

save()

remove()

delete()

下面我們看一下如何在controller中使用get(),query()和save()方法：

angular.module("myApp.controllers",[]);
angular.module("myApp.controllers").controller("ResourceController",function($scope, Entry) {
  var entry = Entry.get({ id: $scope.id }, function() {
    console.log(entry);
  }); // get() 返回單個(gè)entry

  var entries = Entry.query(function() {
    console.log(entries);
  }); //query() 返回有的entry

  $scope.entry = new Entry(); //實(shí)例化一個(gè)資源類(lèi)

  $scope.entry.data = "some data";

  Entry.save($scope.entry, function() {
    //data saved. do something here.
  }); //saves an entry. Assuming $scope.entry is the Entry object  
});

在上面的代碼片段中 get()方法發(fā)起/api/entries/:id的 get 請(qǐng)求。參數(shù):id在被替換為$scope.id。注意get()方法返回一個(gè)空對(duì)象，當(dāng)實(shí)際數(shù)據(jù)從服務(wù)器返回的時(shí)候自動(dòng)填充到這個(gè)空對(duì)象。get()方法的第二個(gè)參數(shù)是回調(diào)方法，當(dāng)服務(wù)器端返回?cái)?shù)據(jù)的時(shí)候執(zhí)行該回調(diào)。這是一個(gè)非常有用的技巧，因?yàn)槟憧梢栽O(shè)置get()返回一個(gè)空對(duì)象，掛載到$scope，綁定視圖。當(dāng)真實(shí)的數(shù)據(jù)返回且填充到對(duì)象，雙向數(shù)據(jù)綁定觸發(fā)，并且更新視圖。

query()方法發(fā)起/api/entries(注意這里沒(méi)有:id)的 get請(qǐng)求 并返回一個(gè)空數(shù)組。當(dāng)服務(wù)器端返回?cái)?shù)據(jù)時(shí)候填充到該數(shù)組。將該數(shù)組繼續(xù)掛在到$scope的模型上，并且在視圖上使用ng-repeat綁定。你也可以給query()傳遞一個(gè)回調(diào)方法，在數(shù)據(jù)從服務(wù)前端返回的時(shí)候執(zhí)行。

save()方法發(fā)起/api/entries的 post 請(qǐng)求， 第一個(gè)參數(shù)是 post body。第二個(gè)參數(shù)為回調(diào)方法,當(dāng)數(shù)據(jù)保存成功后執(zhí)行。你應(yīng)該記得$resource()方法返回的是一個(gè)資源類(lèi)。所以，在我們的用例中，我們可以調(diào)用new Entry()實(shí)例化一個(gè)真正的對(duì)象，設(shè)置若干個(gè)屬性給它，最后將該對(duì)象保存到后端。

假設(shè)你只使用get()和query()在resource類(lèi)上(在我們的例子中resource類(lèi)是Entry)。所有非 get 請(qǐng)求的方法，例如save()和delete()在new Entry()實(shí)例中都能用(在這里稱(chēng)為$resource實(shí)例)。不同的是這些方法都以$的開(kāi)頭。所以這些有用的方法為：

$save()

$delete()

$remove

例如，$save()方法像下面一樣使用：

$scope.entry = new Entry(); //這個(gè)對(duì)象有個(gè)$save()方法
$scope.entry.$save(function() {
  //$scope.entry序列化為json作為post body 發(fā)送
});

我們已經(jīng)實(shí)踐CRUD中的了增加，查找和刪除，剩下的最后一個(gè)修改。為了支持修改操作，我們需要像下面這樣修改我們的Entryfactory：

angular.module("myApp.services").factory("Entry", function($resource) {
  return $resource("/api/entries/:id", { id: "@_id" }, {
    update: {
      method: "PUT" // this method issues a PUT request
    }
  });
});

$resource的第二個(gè) argument 明確標(biāo)識(shí)需要url中:id參數(shù)的值是什么。這里將其設(shè)置為@_id，這意味著在$resource的實(shí)例中不管什么時(shí)候調(diào)用方法例如$update()和$delete()，:id的都會(huì)被設(shè)置為實(shí)例中_id的屬性值。這個(gè)是為 PUT 和 DELETE 請(qǐng)求使用的。注意第三個(gè) argument，它允許我們給資源類(lèi)添加自定義方法。如果該方法是一個(gè)非 get 請(qǐng)求，在$resource會(huì)有一個(gè)以$的同名方法。我們看一下如何使用$update方法。假設(shè)我們?cè)赾ontroller中使用：

$scope.entry = Movie.get({ id: $scope.id }, function() {
  // $scope.entry 是
    $scope.entry.data = "something else";
  $scope.entry.$update(function() {
    //updated in the backend
  });
});

當(dāng)$update()方法調(diào)用的時(shí)候，過(guò)程如下：

Angularjs 知道$update()方法會(huì)觸發(fā) URL 為 /api/entries/:id的 PUT 請(qǐng)求。

讀取$scope.entry._id值，將此值賦給:id并且生成 URL。

發(fā)起一個(gè)請(qǐng)求體為 $scope.entity的 PUT 請(qǐng)求。

同樣，如果你想刪除一個(gè)entry可以像下面這么做：

$scope.entry = Movie.get({ id: $scope.id }, function() {
  // $scope.entry 是服務(wù)器端返回來(lái)的，是一個(gè) Entry 的實(shí)例
  $scope.entry.data = "something else";
  $scope.entry.$delete(function() {
    //gone forever!
  });
});

它和 update 有著同樣的步驟，只是使用 DELETE 替換了 PUT請(qǐng)求類(lèi)型。

我們已經(jīng)覆蓋了CRUD的所有操作，但是還有一小點(diǎn)。$resource方法還有第4個(gè)可選擇的參數(shù)。這是一個(gè)自定義設(shè)置的值。目前只有一個(gè) stripTrailingSlashes可以設(shè)置。它的默認(rèn)值是false,這意味著它會(huì)自動(dòng)刪除 URL 的最后一個(gè) /,如果你不需要可以像下面這么做：

angular.module("myApp.services").factory("Entry", function($resource) {
  return $resource("/api/entries/:id", { id: "@_id" }, {
    update: {
      method: "PUT" // this method issues a PUT request
    }
  }, {
    stripTrailingSlashes: false
  });
});

順便說(shuō)一句，我沒(méi)有覆蓋$resource相關(guān)的每一個(gè)東西。我們這里介紹的是最基本的，這將幫助您很快的開(kāi)始一個(gè)應(yīng)用的 CRUD。如果你仔細(xì)研究$resource，你可以閱讀這篇文章。

為了加強(qiáng)$resource的概念我們?yōu)殡娪皭?ài)好者創(chuàng)建一個(gè)應(yīng)用。這是一個(gè)單頁(yè)應(yīng)用，用戶(hù)可以新增一個(gè)電影，修改一個(gè)已存在的，最后還可以刪除。我們將使用$resource與后端 REST API 進(jìn)行交互。你可以查看這個(gè)在線例子，我們將它部署在這里。

注意API允許CROS訪問(wèn)（跨域資源共享）,所以你可以創(chuàng)建一個(gè)獨(dú)立的 Angular 應(yīng)用，可以使用 http://movieapp-sitepointdemo... 地址為API。你可以開(kāi)發(fā) Angular 應(yīng)用不用擔(dān)心沒(méi)有后端服務(wù)。

我已經(jīng)使用 Node 和 Express創(chuàng)建了一個(gè) RESTful 后端服務(wù)?？聪旅娴慕貓D認(rèn)識(shí)一下API接口：

我們的 AngularJS 應(yīng)用采用下面的目錄結(jié)構(gòu)：

movieApp
  /css
    bootstrap.css
    app.css
  /js
    app.js
    controllers.js
    services.js
  /lib
    angular.min.js
    angular-resource.min.js
    angular-ui-router.min.js
  /partials
    _form.html
    movie-add.html
    movie-edit.html
    movie-view.html
    movies.html
  index.html

注意到我們的路由使用Angular UI Router實(shí)現(xiàn)

像上面部分討論的一樣，我們創(chuàng)建一個(gè)標(biāo)準(zhǔn)的 service 使用$resource與后端 REST API 交互。這個(gè)服務(wù)定義在js/services.js中。

services.js

angular.module("movieApp.services", []).factory("Movie", function($resource) {
  return $resource("http://movieapp-sitepointdemos.rhcloud.com/api/movies/:id", { id: "@_id" }, {
    update: {
      method: "PUT"
    }
  });
});

這個(gè) factory 的名字是 Movie. 我們使用的是 MongoDB,每個(gè) movie 實(shí)例都有一個(gè)_id的屬性。rest是簡(jiǎn)單而直接的。

現(xiàn)在我們已經(jīng)開(kāi)發(fā)好了 service,我們接下來(lái)開(kāi)發(fā) views 和 controllers。

index.html是我們應(yīng)用的入口。我們需要將所有依賴(lài)的 scripts 和 css全部引入到頁(yè)面。我們使用 Bootstrap 來(lái)快速的開(kāi)始布局。下面是index.html的內(nèi)容：

標(biāo)簽沒(méi)什么特別需要說(shuō)明的。需要注意的是

我們主module和 states定義在js/app.js中：

app.js:

angular.module("movieApp", ["ui.router", "ngResource", "movieApp.controllers", "movieApp.services"]);
angular.module("movieApp").config(function($stateProvider) {
  $stateProvider.state("movies", { // 展示所有movie路由
    url: "/movies",
    templateUrl: "partials/movies.html",
    controller: "MovieListController"
  }).state("viewMovie", { //展示單個(gè) movie 路由
    url: "/movies/:id/view",
    templateUrl: "partials/movie-view.html",
    controller: "MovieViewController"
  }).state("newMovie", { //添加一個(gè)新 movie 路由
    url: "/movies/new",
    templateUrl: "partials/movie-add.html",
    controller: "MovieCreateController"
  }).state("editMovie", { //修改一個(gè)movie路由
    url: "/movies/:id/edit",
    templateUrl: "partials/movie-edit.html",
    controller: "MovieEditController"
  });
}).run(function($state) {
  $state.go("movies"); //當(dāng)程序啟動(dòng)時(shí)候默認(rèn)跳轉(zhuǎn)路由
});

所以，我們的應(yīng)用有以下4種狀態(tài)：

movies

viewMovie

newMovie

editMovie

每一個(gè)state由url,templateUrl和controller組成。注意到當(dāng)主模塊加載的時(shí)候路由轉(zhuǎn)向 movies去展示我們系統(tǒng)中所有的movies。下面的截圖看一看出每個(gè)路由對(duì)應(yīng)的url是什么。

所有的模板都在partials目錄下，我們挨個(gè)來(lái)看一下他們的內(nèi)容。

_form.html:

_form.html是一個(gè)讓用戶(hù)錄入數(shù)據(jù)的的簡(jiǎn)單表單。注意到這個(gè)表單會(huì)被movie-add.html和movie-edit.html引入，因?yàn)樗鼈兌夹枰脩?hù)輸入。

下面是_form.html的內(nèi)容：

  Title
  

    
  


  Release Year
  

    
  


  Director
  

    
  


  Movie Genre
  

    
  


  

    
  

模板中使用ng-model綁定不同的movie變量屬性到不同的scope的movie模型。

movie-add.html:

這個(gè)模板接收用戶(hù)輸入并且在我們的系統(tǒng)中保存一個(gè)新的movie，下面是具體內(nèi)容：

當(dāng)表單提交的時(shí)候，會(huì)觸發(fā)scope 的 addMovie()方法向后端發(fā)送一個(gè)創(chuàng)建movie的POST請(qǐng)求。

movie-edit.html:

這個(gè)模板用于接收用戶(hù)收入，并且修改系統(tǒng)在已存在的一個(gè)movie。

這個(gè)表單一旦提交，就會(huì)觸發(fā)scope的 updateMovie()方法像向后端發(fā)送一個(gè) PUT 請(qǐng)求去修改movie信息。

movie-view.html::

這個(gè)模板用于展示一個(gè)movie的詳細(xì)信息。內(nèi)容如下：

  

    
Details for {{movie.title}}
    

  
  

    
Movie Title
    
{{movie.title}}
  
  

    
Director
    
{{movie.director}}
  
  

    
Release Year
    
{{movie.releaseYear}}
  
  

    
Movie Genre
    
{{movie.genre}}
  


  Edit

模板最后是一個(gè)編輯按鈕。點(diǎn)擊按鈕路由會(huì)轉(zhuǎn)向編輯狀態(tài)，并且當(dāng)前編輯的movie id 會(huì)包含在$stateParams中。

movies.html:

這個(gè)模板用于展示系統(tǒng)中所有的 movie。

Add New Movie

  

    
All Movies
    

  
  

    
{{movie.title}}
    

      View
      Delete
    
  

通過(guò)循環(huán)展示后端返回的每個(gè)movie對(duì)象的詳細(xì)詳細(xì)。這個(gè)也有一個(gè)添加按鈕可以將路由轉(zhuǎn)向添加狀態(tài)，觸發(fā)它可以轉(zhuǎn)向一個(gè)新的頁(yè)面并且添加一個(gè)新的movie。

在每個(gè)movie后面都有兩個(gè)操作按鈕，分別是查看和刪除。查看可以轉(zhuǎn)向movie的詳細(xì)信息頁(yè)面。刪除會(huì)將movie永久的刪除掉。

每一個(gè)路由都對(duì)應(yīng)一個(gè)controller。所以，我們總共有4個(gè)controller對(duì)應(yīng)4個(gè)路由。所有的controller都在js/controllers.js中。所有的controllers都是調(diào)用我們上面討論的Movie service服務(wù)。下面看一下controllers如何調(diào)用：

controllers.js:

angular.module("movieApp.controllers", []).controller("MovieListController", function($scope, $state, popupService, $window, Movie) {
  $scope.movies = Movie.query(); //fetch all movies. Issues a GET to /api/movies

  $scope.deleteMovie = function(movie) { // Delete a movie. Issues a DELETE to /api/movies/:id
    if (popupService.showPopup("Really delete this?")) {
      movie.$delete(function() {
        $window.location.href = ""; //redirect to home
      });
    }
  };
}).controller("MovieViewController", function($scope, $stateParams, Movie) {
  $scope.movie = Movie.get({ id: $stateParams.id }); //Get a single movie.Issues a GET to /api/movies/:id
}).controller("MovieCreateController", function($scope, $state, $stateParams, Movie) {
  $scope.movie = new Movie();  //create new movie instance. Properties will be set via ng-model on UI

  $scope.addMovie = function() { //create a new movie. Issues a POST to /api/movies
    $scope.movie.$save(function() {
      $state.go("movies"); // on success go back to home i.e. movies state.
    });
  };
}).controller("MovieEditController", function($scope, $state, $stateParams, Movie) {
  $scope.updateMovie = function() { //Update the edited movie. Issues a PUT to /api/movies/:id
    $scope.movie.$update(function() {
      $state.go("movies"); // on success go back to home i.e. movies state.
    });
  };

  $scope.loadMovie = function() { //Issues a GET request to /api/movies/:id to get a movie to update
    $scope.movie = Movie.get({ id: $stateParams.id });
  };

  $scope.loadMovie(); // Load a movie which can be edited on UI
});

假設(shè)應(yīng)用部署在localhost/movieApp,你可以通過(guò)http://localhost/movieApp/index.html訪問(wèn)。如果你是一個(gè)電影愛(ài)好者，你也可以在里面添加你喜愛(ài)的電影。部署和這篇文章中用到的源碼可以在GitHub進(jìn)行下載。