角动态/通配符路由

时间:2015-03-04 19:38:45

标签: angularjs routes angular-ui-router

我是Angular的新手,我正在尝试整理一些动态/通配符路由,因此我不必手动定义每个页面。

我有一个这样的模块:

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"
        })
    }])

ActionOneActionTwo是某些操作页面的示例,但可能会有几十个左右,并且有时会发生变化。

如何设置它以支持通配符(例如actions/:action),以便我可以使用该参数动态确定路由?


1 个答案:

答案 0 :(得分:0)

已实现我无法将其添加到此处定义的路径数组中;使用指定的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"
        })
    }])