我如何使angular.js路由长路径

我正在用angular.js制作文件浏览器。所以，我会处理一些长的URL，我如何使angular.js路由长路径

如：

MYDOMAIN /文件夹1/SUB1 /盛大SUB1 /.././

我刚学的角度，找到out的角度有$ routeProvider，但是，似乎我应该写很多“when”来完成这项工作（如果我没有定义“when”，模板将不会被使用）。

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

或者，还有其他方法来处理？谢谢。

来源

2013-05-17 Leigh

http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working – user1200750

因为$ 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: '/'}); 
});

来源

2013-05-17 03:33:48 Langdon

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

不要再重复一遍如果！

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)

来源

2013-09-21 22:49:27 ojreadmore

从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

来源

2013-09-21 23:00:11

我如何使angular.js路由长路径

回答

相关问题