AngularJS dynamic/wildcard 条路线
AngularJS dynamic/wildcard routes
我是 Angular 的新手,我正在尝试整理一些 dynamic/wildcard 路线,这样我就不必手动定义每个页面。
我有这样一个模块:
function() {
"use strict";
angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap", "easypiechart", "ui.tree", "ngMap", "ngTagsInput", "angular-loading-bar", "app.controllers", "app.directives", "app.localization", "app.nav", "app.ui.ctrls", "app.ui.directives", "app.ui.services", "app.ui.map", "app.form.validation", "app.ui.form.ctrls", "app.ui.form.directives", "app.tables", "app.task", "app.chart.ctrls", "app.chart.directives", "app.page.ctrls"]).config(["$routeProvider", function($routeProvider) {
var routes, setRoutes;
return routes = ["dashboard", "pages/404", "actions/ActionOne", "actions/ActionTwo"], setRoutes = function(route) {
// ^ and ^
var config, url;
return url = "/" + route, config = {
templateUrl: "views/" + route + ".html"
}, $routeProvider.when(url, config), $routeProvider
}, routes.forEach(function(route) {
return setRoutes(route)
}), $routeProvider.when("/", {
redirectTo: "/dashboard"
}).when("/404", {
templateUrl: "views/pages/404.html"
}).otherwise({
redirectTo: "/404"
})
}])
ActionOne
和 ActionTwo
是一些操作页面的示例,但可能有几十个,而且它们有时会发生变化。
如何设置它以支持通配符(例如,actions/:action
)以便我可以使用该参数动态确定路由?
意识到我无法将它添加到此处定义的路由数组中;使用指定的 when()
语法,一切正常:
function() {
"use strict";
angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap", "easypiechart", "ui.tree", "ngMap", "ngTagsInput", "angular-loading-bar", "app.controllers", "app.directives", "app.localization", "app.nav", "app.ui.ctrls", "app.ui.directives", "app.ui.services", "app.ui.map", "app.form.validation", "app.ui.form.ctrls", "app.ui.form.directives", "app.tables", "app.task", "app.chart.ctrls", "app.chart.directives", "app.page.ctrls"]).config(["$routeProvider", function($routeProvider) {
var routes, setRoutes;
return routes = ["dashboard", "pages/404", "pages/500"], setRoutes = function(route) {
var config, url;
return url = "/" + route, config = {
templateUrl: "views/" + route + ".html"
}, $routeProvider.when(url, config), $routeProvider
}, routes.forEach(function(route) {
return setRoutes(route)
}), $routeProvider.when("/", {
redirectTo: "/dashboard"
}).when("/actions/:name", {
templateUrl: "views/pages/action.html"
}).when("/controls/:name", {
templateUrl: "views/pages/control.html"
}).when("/404", {
templateUrl: "views/pages/404.html"
}).otherwise({
redirectTo: "/404"
})
}])
我是 Angular 的新手,我正在尝试整理一些 dynamic/wildcard 路线,这样我就不必手动定义每个页面。
我有这样一个模块:
function() {
"use strict";
angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap", "easypiechart", "ui.tree", "ngMap", "ngTagsInput", "angular-loading-bar", "app.controllers", "app.directives", "app.localization", "app.nav", "app.ui.ctrls", "app.ui.directives", "app.ui.services", "app.ui.map", "app.form.validation", "app.ui.form.ctrls", "app.ui.form.directives", "app.tables", "app.task", "app.chart.ctrls", "app.chart.directives", "app.page.ctrls"]).config(["$routeProvider", function($routeProvider) {
var routes, setRoutes;
return routes = ["dashboard", "pages/404", "actions/ActionOne", "actions/ActionTwo"], setRoutes = function(route) {
// ^ and ^
var config, url;
return url = "/" + route, config = {
templateUrl: "views/" + route + ".html"
}, $routeProvider.when(url, config), $routeProvider
}, routes.forEach(function(route) {
return setRoutes(route)
}), $routeProvider.when("/", {
redirectTo: "/dashboard"
}).when("/404", {
templateUrl: "views/pages/404.html"
}).otherwise({
redirectTo: "/404"
})
}])
ActionOne
和 ActionTwo
是一些操作页面的示例,但可能有几十个,而且它们有时会发生变化。
如何设置它以支持通配符(例如,actions/:action
)以便我可以使用该参数动态确定路由?
意识到我无法将它添加到此处定义的路由数组中;使用指定的 when()
语法,一切正常:
function() {
"use strict";
angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap", "easypiechart", "ui.tree", "ngMap", "ngTagsInput", "angular-loading-bar", "app.controllers", "app.directives", "app.localization", "app.nav", "app.ui.ctrls", "app.ui.directives", "app.ui.services", "app.ui.map", "app.form.validation", "app.ui.form.ctrls", "app.ui.form.directives", "app.tables", "app.task", "app.chart.ctrls", "app.chart.directives", "app.page.ctrls"]).config(["$routeProvider", function($routeProvider) {
var routes, setRoutes;
return routes = ["dashboard", "pages/404", "pages/500"], setRoutes = function(route) {
var config, url;
return url = "/" + route, config = {
templateUrl: "views/" + route + ".html"
}, $routeProvider.when(url, config), $routeProvider
}, routes.forEach(function(route) {
return setRoutes(route)
}), $routeProvider.when("/", {
redirectTo: "/dashboard"
}).when("/actions/:name", {
templateUrl: "views/pages/action.html"
}).when("/controls/:name", {
templateUrl: "views/pages/control.html"
}).when("/404", {
templateUrl: "views/pages/404.html"
}).otherwise({
redirectTo: "/404"
})
}])