W jaki sposób możemy wykorzystać trasy szyny z angularjs w DRY?
Po pierwsze, powiedziałbym przepraszam za mój zepsuty angielski i zepsute kody ... (wiele słów pochodzi z google translation ... więc obawiam się, że nie mogę wyrazić się jasno ... więc ja wklej wszystkie kody ...)
Konfigurowanie tras w szynach jest naprawdę łatwe. Ale kiedy chcemy go wypaczyć w angurjs, staje się to trochę gadatliwe ... Czy jest jakaś „najlepsza praktyka” dla tego rodzaju pracy:
biorąc pod uwagę niektóre zasoby trasy:
resources :users
resources :photos
...
resources :topics
Jak to zrobić po stronie kątowej?
Tak właśnie robię (w skrypcie kawy, używaniekątowy 1.1.4):
Użyj usługi RESTful w trybie Rails:# 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
])
Trasy: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: '/'})
])
Kontroler powinien być super czysty, a wtedy możemy skupić się na biznesieapp.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)
]
Problem występuje w programie ładującym dla rozwiązania 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
])
Są tu 2 problemy: Pierwszy problem polega na tym, że muszę skopiować & wklej powyższy kod programu ładującego, a następnie gsub („użytkownik”, „zdjęcie”) itp. (Po prostu zmień 2 słowa, ale nienawidzę kopiowania i & paste ..) Próbowałem przenieść go do pętli for, która nie działała i nie mogę zrozumieć dlaczego ... Innym problemem jest ustawienie zagnieżdżonych zasobów w sposób DRY
Na koniec, dziękuję za cierpliwość i powiedziałbym, że przepraszam ... Ale każde rozwiązanie, sugestia lub najlepsze praktyki? Czy robię to źle?