AngularJS路由优化：如何用$routeProvider实现动态参数配置

嘿，作为AngularJS路由新手，你能发现重复硬编码路由的问题真的很敏锐！这里有两种实用的优化方案，帮你摆脱冗余代码：

方案一：用配置数组批量注册路由 #

这种方法适合需要保留独立路由规则、同时减少重复代码的场景。你可以把所有路由的路径和模板信息统一存在一个数组里，再通过循环批量注册：

修改你的配置代码如下：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  // 把路由配置集中存放在数组里，后续加新路由只需在这里新增条目
  const routeList = [
    { path: "/", templateUrl: "main.htm" },
    { path: "/red", templateUrl: "red.htm" },
    { path: "/green", templateUrl: "green.htm" },
    { path: "/blue", templateUrl: "blue.htm" }
  ];

  // 循环数组批量注册路由
  routeList.forEach(route => {
    $routeProvider.when(route.path, { templateUrl: route.templateUrl });
  });
  
  // 可选：添加默认路由，处理无效路径跳转
  $routeProvider.otherwise({ redirectTo: "/" });
});

以后要新增颜色路由，只需要在routeList里加一行配置即可，不用重复写$routeProvider.when()，维护起来方便很多。

方案二：用动态路由参数匹配统一规则 #

如果你的路由路径和模板文件名完全对应（比如/red对应red.htm），那用动态参数会更简洁，直接用一条路由匹配所有颜色路径：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    // 保留根路径的单独配置
    .when("/", { templateUrl: "main.htm" })
    // 用:color作为动态参数，匹配所有/xxx格式的路径
    .when("/:color", {
      // 通过函数动态返回模板路径，同时可做参数有效性验证
      templateUrl: function(params) {
        // 定义有效的颜色列表，避免无效路径尝试加载不存在的模板
        const validColors = ["red", "green", "blue"];
        if (validColors.includes(params.color)) {
          return `${params.color}.htm`;
        }
        // 若为无效颜色，可重定向到主页或返回404模板
        return "main.htm";
      }
    })
    // 处理所有未匹配的路径
    .otherwise({ redirectTo: "/" });
});

这个方案的好处是代码极致简洁，但要注意加参数验证——不然用户输入/yellow会尝试加载不存在的yellow.htm，通过validColors数组过滤无效参数，能保证路由的安全性和稳定性。

两种方案都能解决你的问题，你可以根据后续扩展需求选择：如果以后可能给某些路由加控制器、权限验证等特殊配置，选方案一；如果路由规则一直保持路径和模板名对应，方案二更高效。

内容的提问来源于stack exchange，提问作者Bratan