Angular: UI.Router 解决了 & 控制器代码重复问题
Angular: UI.Router resolves & controller code duplication
我一直在重构我的应用程序以利用 UI.Router 的 state.resolve
来清理一些控制器逻辑。但后来我开始 运行 解决以下问题:如何避免在获取已解析资产中的依赖项以及在更新控制器内的数据时发现的代码重复?
状态
$stateProvider.state 'someState', state =
controller: 'SomeController'
controllerAs: 'vc'
resolve: { viewData: [
'$http'
'$q'
'$stateParams'
'someService'
($http, $q, $stateParams, someService)->
someService.get $stateParams.id
.then (rsp)-> rsp
.catch (err)-> $q.reject err
]}
视图控制器
class SomeController
constructor: (@$http, @$q, @$stateParams, @someService, @viewData)->
# non-Coffee FYI - @arg is the same as "this.arg = arg"
getViewData: ->
someService.get @$stateParams.id
.then (rsp)-> @viewData = rsp
.catch (err)-> $q.reject err
** 一些服务**
class SomeService
constructor: (@$http, @$q)->
get: (id)->
$http.get "/url/#{id}"
.then (rsp)-> rsp.data?.data
.catch (err)-> $q.reject err
状态的 resolved viewData
函数几乎与控制器的 getViewData
调用相同。这似乎非常多余。利用相同代码的任何技巧?
我什至想在已解析的对象中传回一个函数,该函数可以分配给它可以在需要执行相同逻辑时利用的控制器,但我无法弄清楚(非 ng)范围问题。
现实生活
- 进入状态,
resolve
对象获取初始 viewData
- state 的控制器 & UI 渲染当前
viewData
已经设置
- 查看控制器每 x 分钟
轮询 get 服务以检查 viewData
上的更新
公共代码段必须分离成一个服务并包装在函数中:
app.factory('viewDataService', function ($http, $q, $stateParams, someService) {
return function () {
return someService.get($stateParams.id).then(function(rsp) {
return rsp;
})["catch"](function(err) {
return $q.reject(err);
});
}
});
如上所示,这样每次注入服务时都可以调用someService.get
resolve: {
viewData: function (viewDataService) {
return viewDataService();
}
}
我一直在重构我的应用程序以利用 UI.Router 的 state.resolve
来清理一些控制器逻辑。但后来我开始 运行 解决以下问题:如何避免在获取已解析资产中的依赖项以及在更新控制器内的数据时发现的代码重复?
状态
$stateProvider.state 'someState', state =
controller: 'SomeController'
controllerAs: 'vc'
resolve: { viewData: [
'$http'
'$q'
'$stateParams'
'someService'
($http, $q, $stateParams, someService)->
someService.get $stateParams.id
.then (rsp)-> rsp
.catch (err)-> $q.reject err
]}
视图控制器
class SomeController
constructor: (@$http, @$q, @$stateParams, @someService, @viewData)->
# non-Coffee FYI - @arg is the same as "this.arg = arg"
getViewData: ->
someService.get @$stateParams.id
.then (rsp)-> @viewData = rsp
.catch (err)-> $q.reject err
** 一些服务**
class SomeService
constructor: (@$http, @$q)->
get: (id)->
$http.get "/url/#{id}"
.then (rsp)-> rsp.data?.data
.catch (err)-> $q.reject err
状态的 resolved viewData
函数几乎与控制器的 getViewData
调用相同。这似乎非常多余。利用相同代码的任何技巧?
我什至想在已解析的对象中传回一个函数,该函数可以分配给它可以在需要执行相同逻辑时利用的控制器,但我无法弄清楚(非 ng)范围问题。
现实生活
- 进入状态,
resolve
对象获取初始viewData
- state 的控制器 & UI 渲染当前
viewData
已经设置 - 查看控制器每 x 分钟 轮询 get 服务以检查
viewData
上的更新
公共代码段必须分离成一个服务并包装在函数中:
app.factory('viewDataService', function ($http, $q, $stateParams, someService) {
return function () {
return someService.get($stateParams.id).then(function(rsp) {
return rsp;
})["catch"](function(err) {
return $q.reject(err);
});
}
});
如上所示someService.get
resolve: {
viewData: function (viewDataService) {
return viewDataService();
}
}