AngularJs 在回调里面配置路由 app.config
AngularJs configure route in callback inside app.config
我正在开发一个应用程序,我需要路由必须加载动态模板,例如:
当我点击 /myclient/#!/details 时,我需要从 "myclient" 目录加载模板。
我有一个 json API 可以为每个客户端响应此配置。
[{
"path": "/",
"templateUrl": "template/loja1/index.html",
"controller": "homeController"
}, {
"path": "/detail",
"templateUrl": "template/loja1/detail.html",
"controller": "homeController"
}];
因此,我在尝试将 angular.config 设置为此 API 响应的回调时遇到问题。我也尝试在回调后设置路由。
我认为这个解决方案很合适。我做错了什么?
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider, $locationProvider, $provide) {
$locationProvider.hashPrefix('!');
var API = $provide.factory('API', function($http) {
return {
getStore: function() {
return $http.get("http://localhost:8080/resources/route");
}
};
});
var runRote = function(routes) {
routes.forEach(function(route) {
$routeProvider.when(route.path, {
templateUrl: route.templateUrl,
controller: route.controller
});
});
$routeProvider.otherwise({
redirectTo: "templates/404.html"
});
};
var getRoutes = function(runRote) {
API.$get().getStore().success(function(data, status) {
runRote(JSON.stringify(data));
}).error(function(data, status) {
runRote();
});
};
getRoutes(runRote);
});
将路由数组传递给 runRote
函数时,您不必将其字符串化。在其中,您对传递的数据使用 forEach
方法,这是一种数组方法,而不是字符串。正确的代码应该是:
var getRoutes = function(runRote) {
API.$get().getStore().success(function(data, status) {
runRote(data);
}).error(function(data, status) {
runRote();
});
};
另外路由的配置应该是
redirectTo: "templates/404.html"
德里卡!
使用@dfsq 发送的这个实现,它会工作,但是这部分
app.controller('homeController', function($route) {
window.route = $route;
});
如果您使用 ui-route,则 不是必需的。
否则,这个问题在 / 路由中,您可以使用 localStorage 保存您的 json 信息并重新加载页面。在我的测试中,它起作用了。
我正在开发一个应用程序,我需要路由必须加载动态模板,例如:
当我点击 /myclient/#!/details 时,我需要从 "myclient" 目录加载模板。
我有一个 json API 可以为每个客户端响应此配置。
[{
"path": "/",
"templateUrl": "template/loja1/index.html",
"controller": "homeController"
}, {
"path": "/detail",
"templateUrl": "template/loja1/detail.html",
"controller": "homeController"
}];
因此,我在尝试将 angular.config 设置为此 API 响应的回调时遇到问题。我也尝试在回调后设置路由。
我认为这个解决方案很合适。我做错了什么?
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider, $locationProvider, $provide) {
$locationProvider.hashPrefix('!');
var API = $provide.factory('API', function($http) {
return {
getStore: function() {
return $http.get("http://localhost:8080/resources/route");
}
};
});
var runRote = function(routes) {
routes.forEach(function(route) {
$routeProvider.when(route.path, {
templateUrl: route.templateUrl,
controller: route.controller
});
});
$routeProvider.otherwise({
redirectTo: "templates/404.html"
});
};
var getRoutes = function(runRote) {
API.$get().getStore().success(function(data, status) {
runRote(JSON.stringify(data));
}).error(function(data, status) {
runRote();
});
};
getRoutes(runRote);
});
将路由数组传递给 runRote
函数时,您不必将其字符串化。在其中,您对传递的数据使用 forEach
方法,这是一种数组方法,而不是字符串。正确的代码应该是:
var getRoutes = function(runRote) {
API.$get().getStore().success(function(data, status) {
runRote(data);
}).error(function(data, status) {
runRote();
});
};
另外路由的配置应该是
redirectTo: "templates/404.html"
德里卡!
使用@dfsq 发送的这个实现,它会工作,但是这部分
app.controller('homeController', function($route) {
window.route = $route;
});
如果您使用 ui-route,则 不是必需的。 否则,这个问题在 / 路由中,您可以使用 localStorage 保存您的 json 信息并重新加载页面。在我的测试中,它起作用了。