使用角度 ui 路由器获取服务中的路由参数
Fetching route parameters in service with angular-ui-router
使用 Angular 的默认路由器,您可以通过在路由中放置以下内容来解析 AJAX 资源:
.when('/view/:recipeId', {
controller: 'ViewCtrl',
resolve: {
recipe: ["RecipeLoader", function(RecipeLoader) {
return RecipeLoader();
}]
},
并实现此服务:
services.factory('RecipeLoader', ['Recipe', '$route', '$q',
function(Recipe, $route, $q) {
return function() {
var delay = $q.defer();
Recipe.get({id: $route.current.params.recipeId}, function(recipe) {
delay.resolve(recipe);
}, function() {
delay.reject('Unable to fetch recipe ' + $route.current.params.recipeId);
});
return delay.promise;
};
}]);
我目前正在开发一个Ionic应用程序,并有以下服务:
services.factory('AlbumLoader', ['Album', '$route','$q', function (Album, $state, $q) {
return function () {
var delay = $q.defer();
Album.get({id: $route.current.params.albumId}, function (album) {
delay.resolve(album);
}, function() {
delay.reject('Unable to fetch album');
});
return delay.promise;
}
}]);
以及以下路线:
.state('app.album', {
cache: false,
url: "/albums/:albumId",
resolve: {
album: ['AlbumLoader', function (AlbumLoader) {
return AlbumLoader();
}]
},
views: {
'menuContent': {
templateUrl: "templates/album.html",
controller: 'AlbumCtrl'
}
}
})
Ionic使用angular-ui-router
,关于这个问题的文档并不完全清楚。如何使用angular-ui-router
以与默认 Angular 路由器相同的方式获取服务中的路由参数?
编辑:仍然有一些问题。使用加载程序内的 Chrome 调试器,当 URL #/app/albums/17ef729c-af5b-4724-9c69-9585ab542e99
时,$state.params 是一个空对象。这会导致错误消息Error: [$resource:badcfg] Error in resource configuration for action get. Expected response to contain an object but got an array
因为唱片集 ID 未传递。
$state
就像$route.
只需将$route
更改为 $state
并且它不会嵌套在 $state.current.params
使用$state.params
下。 或者你可以注射$stateParams.
services.factory('AlbumLoader', ['Album', '$state', '$q', function(Album, $state, $q) {
var delay = $q.defer();
Album.get({
id: $state.params.albumId
}, function(album) {
delay.resolve(album);
}, function() {
delay.reject('Unable to fetch album');
});
return delay.promise;
}]);
关于$stateParams
的文档,jsbin来玩它:
这
在你的状态配置中
.state("funnyState", {
url: "/xxx/:id",
templateUrl: "template.html",
controller: "funnyController",
resolve: {
thingINeed : function($stateParams, funnyService){
return funnyService.getReallyFunnyItem($stateParams.id);
}
}
})
在您的控制器中,这
angular.module("app.controllers").controller("funnyController", ["$state", "thingINeed", funnyController]);
function funnyController($state, thingINeed){
//thingIneed is resolved promise
//$state contains the id -> $state.params.id
}
至少我在目前的项目中是这样做的。
相关文章:
- 如何在从缓存加载路由后强制服务工作者从网络请求路由
- 如何使用路由提供程序在应用中调用模式服务
- 使用路由的未定义服务控制器
- 我可以在 angle js asp.net mvc 中调用控制器中的路由提供程序服务吗?
- 如何在刷新时将持久数据保存在角度路由服务中
- 使用角度 ui 路由器获取服务中的路由参数
- 角度 ui 路由器解析服务停止路由更改
- 为什么在重新加载路由时重新初始化 AngularJS 服务
- 从外部web服务获取图像并将其传递到另一个express js路由
- 如何在AgularJS服务中添加到$resource的路由
- 使用Angularjs服务的配置在.run()中生成路由
- 如何在angular.js中分别编写控制器、服务、路由和模块
- 分离角度路由、控制器和服务
- Node.js REST API服务中使用的基于资源的路由模块,或用于此类服务的其他有用模块
- 从Express服务的客户端React应用上的一致url路由
- 在谷歌地图API 3中清除方向服务的路由失败
- 为什么AngularJS的服务在从一个路由导航到另一个路由时没有定义?
- 检测Angular服务中的路由变化
- 如何将服务变量定义为当前路由
- 角度路由解决了服务问题