4

まず第一に、私は私の壊れた英語と壊れたコードについて申し訳ありません...(ここの多くの単語はグーグル翻訳から来ています.すべてのコードを貼り付けます...)

レールにルートを設定するのはとても簡単です。しかし、それをangurjsにワープしたいときは、少し冗長になります...この種の仕事のための「ベストプラクティス」はありますか:

いくつかのレールルートリソースが与えられた場合:

resources :users
resources :photos
...
resources :topics

角度のある側でそれを行う方法は?

これが私のやり方です(コーヒースクリプトで、角度 1.1.4を使用):

Rails の方法で RESTful サービスを使用します。

# angular/services/restful.js.coffee
# RESTful resource following Rails route's convention
# index:  GET  '/resource.json'
# save:   POST '/resource.json'
# get:    GET  '/resource/:id.json'
# update: PUT  '/resource/:id.json'
# edit:   GET  '/resource/:id/edit.json'
# new:    GET   just use get, id: 'new'
app.factory('RESTful', ['$resource',
  ($resource)->
    (resource_name) ->
      url = "/#{resource_name}/:id:format"
      defaults={format: '.json', id: '@id'}

      actions = {
        index:
          id: ''
          url: "/#{resource_name}:format"
          method: 'GET'
          isArray:false
        edit:
          url: "/#{resource_name}/:id/edit:format"
          method: 'GET'
        update:
          method: 'PUT'
        save:
          url: "/#{resource_name}:format"
          method: 'POST'
      }

      $resource url, defaults, actions
])

# index:  GET  '/parents/:parent_id/children.json'
# save:   POST '/parents/:parent_id/children.json'
# get:    GET  '/parents/:parent_id/children/:id.json'
# update: PUT  '/parents/:parent_id/children/:id.json'
# edit:   GET  '/parents/:parent_id/children/:id/edit.json'
# new:    GET   just use get, id: 'new'
app.factory('NESTful', ['$resource',
  ($resource)->
    (parents, children) ->
      # naive singularize
      parent = parents.replace(/s$/, '')
      url = "/#{parents}/:#{parent}_id/#{children}/:id:format"

      defaults={ format: '.json', id: '@id' }

      actions = {
        index:
          id: ''
          url: "/#{parents}/:#{parent}_id/#{children}:format"
          method: 'GET'
          isArray:false
        edit:
          url: "/#{parents}/:#{parent}_id/#{children}/:id/edit:format"
          method: 'GET'
        update:
          method: 'PUT'
        save:
          url: "/#{parents}/:#{parent}_id/#{children}:format"
          method: 'POST'
      }

      $resource url, defaults, actions
])

ルート:

app.config(['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
  $locationProvider.html5Mode(true)

  # general RESTful routes
  resource_list = ['users', 'photos', 'topics']
  for resource in resource_list
    # naive singularize
    singular = resource.replace(/s$/, "")
    captialize = singular.charAt(0).toUpperCase() + singular.slice(1)
    $routeProvider
      .when "/#{resource}",
          templateUrl: "/tp/#{resource}/index"
          controller: "#{captialize}IndexCtrl"
          resolve:
            index: ["#{captialize}Loader", (Loader)-> Loader('index')]
      .when "/#{resource}/new",
          templateUrl: "/tp/#{resource}/edit"
          controller: "#{captialize}NewCtrl"
          resolve:
            resource: ["#{captialize}Loader", (Loader)-> Loader('new')]
      .when "/#{resource}/:id",
          templateUrl: "/tp/#{resource}/show"
          controller: "#{captialize}ShowCtrl"
          resolve:
            resource: ["#{captialize}Loader", (Loader)-> Loader('show')]
      .when "/#{resource}/:id/edit",
          templateUrl: "/tp/#{resource}/edit"
          controller: "#{captialize}EditCtrl"
          resolve:
            resource: ["#{captialize}Loader", (Loader)-> Loader('edit')]

  # special routes
  $routeProvider
    .when '/',
        templateUrl: '/tp/pages/home'
        controller: 'PageCtrl'

    .otherwise({redirectTo: '/'})
])

コントローラーは非常にクリーンである必要があり、ビジネスに集中できます

app.controller 'UserShowCtrl', ['$scope', 'resource'
  ($scope, resource)->
    $scope.user = resource.user
]
app.controller 'UserIndexCtrl', ['$scope', 'index',
  ($scope, index) ->
    $scope.users = index.resource.users
    $scope.total_pages = index.pages.total_pages
    $scope.currentPage = index.pages.current_page

    getPage = (page)->
      index.resource.$index
        page: page
        (resource, headers)->
          $scope.users = resource.users

    $scope.$watch 'currentPage', (newval)->
      getPage(newval)
]

問題は解決 obj のローダーにあります。

app.factory('UserLoader', ['RESTful', '$route', '$q',
  (RESTful, $route, $q) ->
    (action)->
      model = 'users'
      delay = $q.defer()
      fetcher = RESTful(model)
      switch action
        when 'index'
          fetcher.index
            page: $route.current.params.page
            (resource, headers)->
              delay.resolve
                resource: resource
                pages: JSON.parse(headers('X-Pagination'))
            (resource)->
              delay.reject "Unable to fetch #{model} index"
        when 'show'
          fetcher.get
            id: $route.current.params.id
            (resource)->
              delay.resolve(resource)
            (resource)->
              delay.reject "Unable to fetch #{model} #{$route.current.params.id}"
        when 'edit'
          fetcher.edit
            id: $route.current.params.id
            (resource)->
              delay.resolve(resource)
            (resource)->
              delay.reject "Unable to fetch #{model} #{$route.current.params.id} edit"
        when 'new'
          fetcher.get
            id: 'new'
            (resource)->
              delay.resolve(resource)
            (resource)->
              delay.reject "Unable to fetch #{model} new"

      return delay.promise
])

ここには 2 つの問題があります: 最初の問題は、上記のローダー コードをコピー && ペーストしてから、gsub('user', 'photo') などをコピーする必要があることです... (実際には 2 つの単語を変更するだけですが、コピー && は嫌いです)貼り付け..) 動作しない for ループで移動しようとしましたが、理由がわかりません... 別の問題は、ネストされたリソースを DRY 方法で設定する方法です。

最後に、ご不便をおかけして申し訳ございません。また、解決策、提案、またはベスト プラクティスはありますか? 私はそれを間違っていますか?

4

3 に答える 3

3

質問の説明が非常に複雑(大量のコード)であることを除けば、REST APIの概念の要点を見逃したと思います。

Rails バックエンド リソース (およびそのルーティング) とクライアント側ルーティングを混在させています。これは間違っています。フロントエンド アプリのルートは、REST ルートを飛び越える (シャドウィングする) べきではありません。usersリソース (たとえば) を取得している場合はGET /users/5.json、クライアントを に移動しないでください/tp/users/show。REST とクライアント側のルートは、2 つの別個の独立した抽象化です。

クライアント側のルートは次のようになります

/
/userprofile
/dashboard
/articles/2013?page=4

そして、これらのルートにあるコントローラーは、リソース サービスを使用して、次のように REST API から必要なデータをフェッチする必要があります。

angular.module('myApp').controller 'UserProfileController', ($scope, userResource) ->
  $scope.user = userResource.query({id: SOME_ID})

angular.module('myApp.resources').factory 'userResource', ($resource) ->
  params = {
    id: '@id'
    subItem: '@subItem'
    subItemId: '@subItemId'
  }

  actions = {
    query: {
      method: 'GET'
      params: {}
      isArray: true
    }
    ban: {
      method: 'POST'
      params: {banned: true}
    }
  }

  return $resource('/api-1.0/users/:id/:subItem/:subItemId', params, actions)
于 2013-07-25T05:25:19.733 に答える