如何使 angular.js 路由长路径答案

【问题标题】：How can I make the angular.js route the long path如何使 angular.js 路由长路径
【发布时间】：2013-05-12 02:52:32
【问题描述】：

我正在使用 angular.js 制作文件浏览器。所以，我会处理一些长网址，

例如：

mydomain/folder1/sub1/grand-sub1/.././

我刚学了 angular，发现 angular 有 $routeProvider，但是，看来我应该写很多“when”来完成这项工作（如果我没有定义“when”，则不会使用模板） .

角度是否支持“*”让所有子目录的路径使用相同的模板？

或者，还有其他方法可以解决这个问题吗？谢谢。

【问题讨论】：

stackoverflow.com/questions/41211875/…

标签： javascript web-applications angularjs

【解决方案1】：

从 AngularJS 1.2 开始（目前处于候选发布阶段），您可以使用通配符来匹配更多路径。来自new documentation：

path 可以包含以冒号开头并以星号结尾的命名组 (:name*)。当路由匹配时，所有字符都急切地存储在给定名称下的$routeParams。

例如，/color/:color/largecode/:largecode*\/edit 之类的路由将匹配 /color/brown/largecode/code/with/slashs/edit 并提取：
color: brown
largecode: code/with/slashs.

现在您必须包含额外的angular-route.js 文件，这是毫无价值的，因为默认情况下不再包含路由层以节省文件大小。此外，您的模块必须将ngRoute 声明为其依赖项之一。您的代码如下所示：

var app = angular.module('app', ['ngRoute']);

app.controller('HomeCtrl', function ($scope, $route) {
});

app.controller('DirCtrl', function ($scope, $routeParams) {
  $scope.path = '/' + $routeParams.dir;
});

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
    .when('/dir/:dir*', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .otherwise({redirectTo: '/'});
});

工作示例：http://plnkr.co/edit/BSPWYPnHM7GJRgNCAjoi?p=preview

【讨论】：

【解决方案2】：

不要重复自己！

var dirRoute = {templateUrl: 'dir.html', controller: 'DirCtrl'};

$routeProvider
  .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
  .when('/dir', dirRoute)
  .when('/dir/:p1', dirRoute)
  .when('/dir/:p1/:p2', dirRoute)
  .when('/dir/:p1/:p2/:p3', dirRoute)
  .when('/dir/:p1/:p2/:p3/:p4', dirRoute)
  .when('/dir/:p1/:p2/:p3/:p4/:p5', dirRoute)

【讨论】：

【解决方案3】：

由于 $routeProvider 目前不支持通配符（see here 和答案中的 2 个链接），您必须稍微修改一下...

http://plnkr.co/edit/OuVRSrDUvdVF5yFDHnmM?p=preview

HTML

<a href="#/dir">/</a>
<br/>
<a href="#/dir/folder1">/folder1</a>
<br/>
<a href="#/dir/folder1/sub1">/folder1/sub1</a>
<br/>
<a href="#/dir/folder1/sub1/grandsub1">/folder1/sub1/grandsub1</a>
<br/>

JavaScript

app.controller('DirCtrl', function ($scope, $route) {
  var p = $route.current.params;

  $scope.path = '/';
  if (p.p1) $scope.path += p.p1;
  if (p.p2) $scope.path += '/' + p.p2;
  if (p.p3) $scope.path += '/' + p.p3;
  if (p.p4) $scope.path += '/' + p.p4;
  if (p.p5) $scope.path += '/' + p.p5;
});

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
    .when('/dir', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2/:p3', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2/:p3/:p4', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2/:p3/:p4/:p5', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    /* add more as necessary */
    .otherwise({redirectTo: '/'});
});

【讨论】：

看来这是我唯一能做的。非常感谢您的回答。