加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ruby-on-rails – 我们如何以干燥的方式使用带有angularjs的rail

发布时间:2020-12-17 02:21:08 所属栏目:百科 来源:网络整理
导读:首先,我会为我破碎的英语和破碎的代码表示遗憾……(这里有很多单词来自谷歌翻译……所以,我担心我不能说清楚……所以,我粘贴所有代码…) 在rails中设置路由非常简单.但是当我们想把它变成angurjs时,它变得有点冗长……对于这类工作有没有“最佳实践”: 给出
首先,我会为我破碎的英语和破碎的代码表示遗憾……(这里有很多单词来自谷歌翻译……所以,我担心我不能说清楚……所以,我粘贴所有代码…)

在rails中设置路由非常简单.但是当我们想把它变成angurjs时,它变得有点冗长……对于这类工作有没有“最佳实践”:

给出一些rails路由资源:

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)->
    (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,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','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)
]

问题出在Loader for resolve 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
])

这里有两个问题:
第一个问题是我必须复制&&粘贴上面的加载器代码,然后粘贴gsub(‘user’,’photo’)等…
(实际上只改2个字,但我讨厌复制&&粘贴..)
我试过在for循环中移动它,但是我无法弄清楚为什么……
另一个问题是如何以干燥的方式设置嵌套资源

最后,感谢您的耐心等待,我会再次对不起…
但任何解决方案,建议或最佳做法?
我做错了吗?

解决方法

除了你对这个问题的描述非常复杂(大量的代码)之外,我认为你错过了REST API概念.

您正在将Rails后端资源(及其路由)与客户端路由混合在一起.这是错误的恕我直言.您的前端应用程序路由不应该在REST路由上跳跃(阴影).
如果您要获取用户资源(例如GET /users/5.json),则不应将客户端导航到/ tp / users / show.您的REST和客户端路由是两个独立的独立抽象.

你的客户端路线应该是这样的

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

坐在这些路由上的控制器应该使用您的资源服务从REST API获取所需的数据,如下所示:

angular.module('myApp').controller 'UserProfileController',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)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读