我最近在做 Rails + Angular CRUD ， 我是 Rails 寫很久最近開始寫 Angular， 我想我可以分享一些經驗。 首先你要把 Angular CRUD 和 Rails CRUD 分開來看， Angular 的資料不管怎麼改，都是存在前端的 JavaScript 的記憶體裡面， 沒有後送到 Server 的話 Server 都不知道。 Angular 做為一個前端 framework 是不需要管後端怎麼做的， 在拿資料的時候是用 JSON 拿沒錯，但存回 server 的時候還是得用 Ajax 打回去。 具體的做法是這樣： // in controller $http.post("/articles", { title: "New Article 1", content: "..." }) .then(function(response) { /* 存好了 */ }); 打開 Chrome 的 Inspector 的 Network ，你會看到有個 request 過去。 那麼，既然都用 Ajax 存資料到後端了，取得資料當然也用 Ajax 做： $http.get("/articles/1") .then(function(response) { $scope.article = response; } 後端出 JSON 用 respond_with 你應該不陌生。 到這裡為止，你可以參考 Angular 官方的 Tutorial "PhoneCat" http://docs.angularjs.org/tutorial/step_00 它會一步一步教到用 $resource 來跟後端 RESTful Server 存取資料。 不過呢，預設的 Angular $http 是沒辦法接上 Rails 的 原因有二，一個是 $http 少送一個 header 叫 X-Requested-With=XMLHttpRequest 大部份的 Ajax Library 都有送，就它沒送，所以它認不出 POST by Ajax。 所以要去偷改 $httpProvider: app.config([ '$httpProvider', function($httpProvider) { $httpProvider.defaults.headers .common["X-Requested-With"] = "XMLHttpRequest"; } ]); 這樣 Rails 就能正確解出 POST by Ajax 了。 第二個是 CSRF Token 的傳法 Rails 一般的表單做法是藏在 Form 裡面有個 hidden input， Rails 傳統的 Ajax 用 UJS 會自動讀 meta 裡面的 CSRF Token 但 Angular 是用 Header 傳，並且取第一次連線時的 cookie['XSRF-TOKEN']， 於是你要 hack 一下 controller 讓它送出這個 cookie 並且讓 Rails 去認 Angular 傳來的 Token in Header 詳細：http://stackoverflow.com/a/15761835 最後是關於 $resource 的一些 caveats $resource 跟 restangular 我都用過， 最後是覺得後者的 DSL 太難記，前者就單純是 CRUD ，比較好學。 首先是 Rails 的 "Update" 通常是 PATCH 或 PUT， 所以官方文件裡面的範例的 article.$save 在 Rails 不太實用（它是送 POST） 在 $resource 裡面要這樣定義（其實文件裡面也有提到）： var Article = $resource("/articles/:id", { // default options id: "@id" // 表示自動取用 Article class 的 instance 的 "id" property }, { // custom actions update: { method: "PUT" // 定義 article.$update 送 PUT request } }); 至於存的時候是這樣存： // 先更新 JavaScript 物件的資料 $scope.article.title = "New Title"; // 或是 ng-model 綁到 input $scope.article.content = "New Content"; // 戳 "update" button 的時候 $scope.article.$update .then(function(article) { // Rails 傳回 show.json // 然後一個一個欄位更新 // 不要直接 $scope.article = article，不然會變成不是 $resource 的物件 for (var property in article) { if (article.hasOwnProperty(property)) { $scope.article[property] = article[property]; } }, function(response) { // 儲存失敗，Rails 直接 render :json => { :errors => @article.errors } $scope.errors = response.data.errors; // 然後你在 view 裡面用 ng-if 去 render errors }); 如果是 nested 的場合是這樣： var Comment = $resource("/articles/:articleId/comments/:id", { id: "@id", articleId: $scope.article.id }, { // 略 }); 也配合 ng-route 或 Angular UI-Router 可以從 #/ 裡面取得 article id 。 custom member action 的做法是這樣（以「把某噗靜音」為例）： var Plurk = $resource("/plurks/:id/:action", { id: "@id", action: "" // 預設把 action 填空字串 }, { mute: { method: "POST", params: { action: "mute" // 把 action 填入 "mute" } } }); 這樣子 plurk.$mute() 就會送出 POST /plurks/123/mute 了。 但 $resource 如果要對 collection 做 custom action 會很難處理， 因為 $resource 不像 Rails 的 routes.rb 可以定義 collection 和 member action， 而且話說回來 Rails 的 router 處理 collection action 本來就是跟 id 多載， 所以我看到 Stack Overflow 上面有人的做法是這樣： // 以「把所有的噗都設為已讀」(MAAR) 為例 var Plurk = $resource("/plurks/:id:collectionAction/:memberAction", { id: "@id", collectionAction: "", memberAction: "" }, { maar: { method: "POST", params: { id: "", collectionAction: "maar" } } }); 這樣很醜，但似乎很多人都是這樣寫的，不過我實際上沒寫過就是了。 ※ 引述《lisaweng (piglet)》之銘言： : 最近在學AngularJs 不知道各位大大有沒有學過 : 後端是用rails寫的 : 面臨到的問題是 : 一開始view那邊我都是用angularJs從rails拿data : 把.JSON的資料存到變數 : 然後再顯示在網頁上 : 可是發現這樣好像就沒怎麼到two way data binding : 所以請問這樣我在做的時候也是要在AngularJS建資料嗎 : 例如說假設我現在在做一個部落格 : 我現在的做法是 : 每當我在點"Create Article" 我的文章就會存在rails那邊 : 然後當我要顯示那個文章的時候。我必須去讀那個文章的.JSON : 可是這樣好像不太效率 : 是不是我應該要改成我每一次點Create Article的時候 : 要把資料同時存在rails和js呢？ : 然後讀的時候可以直接從js讀？ : 謝謝! --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.231.18.230 ※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1397743476.A.7C2.html ※ 編輯: ducksteven (36.231.18.230), 04/17/2014 22:06:28 ※ 編輯: ducksteven (36.231.18.230), 04/17/2014 22:09:45 ※ 編輯: ducksteven (36.231.18.230), 04/17/2014 22:11:17 ※ 編輯: ducksteven (36.231.18.230), 04/17/2014 22:14:22 ※ 編輯: ducksteven (36.231.18.230), 04/17/2014 22:18:21