javascript-在大型应用程序中如何避免许多“ $routeProvider.when”

有没有一种方法可以编写一种方法来解析即将到来的$location.path并加载特定的html模板或应用$route.目前,我的应用程序有很长的“何时”列表,完成后将翻一番或三倍.

 .config(['$routeProvider',
 function ($routeProvider) {
  $routeProvider.
      //Home
      //User/Tenant/Register
   when('/register', { templateUrl: 'pages/Auth/register.html' }).
   when('/login', { templateUrl: 'pages/Auth/login.html' }).
      //User
   when('/user', { templateUrl: 'pages/User/list.html' }).
   when('/user/new', { templateUrl: 'pages/User/new.html' }).
   when('/user/:userId', { templateUrl: 'pages/User/detail.html' }).
   when('/user/edit/:userId', { templateUrl: 'pages/User/new.html' }).
         //Role
   when('/role', { templateUrl: 'pages/Role/list.html' }).
   when('/role/new', { templateUrl: 'pages/Role/new.html' }).
   when('/role/:roleId', { templateUrl: 'pages/Role/detail.html' }).
   when('/role/edit/:roleId', { templateUrl: 'pages/Role/new.html' }).
   when('/roleassign', { templateUrl: 'pages/Role/assign.html' }).
   when('/roledefine', { templateUrl: 'pages/Role/define.html' }).
        //Permissions
   when('/permission', { templateUrl: 'pages/Permission/list.html' }).
   when('/permission/new', { templateUrl: 'pages/Permission/new.html' }).
   when('/permission/:permissionId', { templateUrl: 'pages/Permission/detail.html' }).
   when('/permission/edit/:permissionId', { templateUrl: 'pages/Permission/new.html' }).
   when('/permissionassign', { templateUrl: 'pages/Permission/assign.html' }).
      //Counter
   when('/X', { templateUrl: 'pages/Counter/list.html' }).
   when('/X/new', { templateUrl: 'pages/Counter/new.html' }).
   when('/X/:counterId', { templateUrl: 'pages/Counter/detail.html' }).
   when('/X/edit/:counterId', { templateUrl: 'pages/Counter/new.html' }).
      //Company
   when('/Y', { templateUrl: 'pages/Y/list.html' }).
   when('/Y/new', { templateUrl: 'pages/Y/new.html' }).
   when('/Y/:companyId', { templateUrl: 'pages/Y/detail.html' }).
   when('/Y/edit/:companyId', { templateUrl: 'pages/Y/new.html' }).
      //Product
   when('/Z', { templateUrl: 'pages/Z/list.html' }).
   when('/Z/new', { templateUrl: 'pages/Z/new.html' }).
   when('/Z/:productId', { templateUrl: 'pages/Z/detail.html' }).
   when('/Z/edit/:productId', { templateUrl: 'pages/Z/new.html' }).
   otherwise({
       redirectTo: '/index',
       templateUrl: 'pages/dashboard.html'
   });
  //$locationProvider.html5Mode(true);
  }])

解决方法:

解决方案1：单独的配置脚本

您可以有多个配置,而不是只有一个配置.如果这有助于提高可维护性,那么我会将各个组划分为各自的组,这样就可以一次管理一个子集并使事物模式可管理.
看来您的应用程序使用文件夹来分隔特定的功能组.这些配置脚本文件可以完成相同的操作.它们可以包含在他们的脚本组中.

解决方案2：DRY代码

在您的代码中似乎有很多时候共享了一些可以重构的通用约定,因此所有这些都只能运行一个块,而不必一遍又一遍地重复相同的代码.

angular.foreach([
        "user",
        "permission",
        "role",
        "X",
        "Y",
        ...
    ], function(value) {
    $routeProvider
        .when("/" + value, { templateUrl: "pages/" + value + "/list.html" })
        .when("/" + value + "/new", { ... })
        .when("/" + value + "/:" + value + "Id", { ... }),
        .when("/" + value + "/edit/:" + value + "Id", { ... })
});

但是,由于我通常在JavaScript中实现简化的string.prototype.format函数以帮助进行字符串连接,因此我将这些行写为：

angular.foreach([
        "user",
        "permission",
        "role",
        "X",
        "Y",
        ...
    ], function(value) {
    $routeProvider
        .when("/{0}".format(value), { templateUrl: "pages/" + value + "/list.html" })
        .when("/{0}/new".format(value), { ... })
        .when("/{0}/:{0}Id".format(value), { ... }),
        .when("/{0}/edit/:{0}Id".format(value), { ... })
});

对于那些定义其他路由的组,我可以看到可以重构的相似模式(即角色也具有定义和分配).在我之前的代码示例中,我仅提供了一个字符串值数组.可以更改这些设置,以提供一个对象,该对象的属性设置为数组,它们需要执行其他操作并在迭代器函数中进行处理.

angular.forEach({
    user: [],
    role: ["assign", "define"],
    permission: ["assign"],
    ...
}, function(actions, key) {
    // same 4 as above by using "key" instead of "value"
    $routeProvider
        .when("/{0}".format(key), { ... })
        ...;
    // if element has additional actions, configure those as well
    angular.forEach(actions, function(action) {
        $routeProvider.when("/{0}{1}".format(key, action), { ... });
    });
});

简化的string.prototype.format实现

String.prototype.format = String.prototype.format || function () {
    ///<summary>Replaces placeholders in string with provided parameters.</summary>

    "use strict";

    var args = arguments;

    return this.replace(/{(\d+)}/g, function (match, index) {
        return typeof (args[index]) != "undefined" ? args[+index] : "";
    });
};

标签：angularjs,url-routing,angularjs-routing,javascript
来源： https://codeday.me/bug/20191029/1960130.html