AngularJS包罗万象？答案

【问题标题】：AngularJS catch-all route?AngularJS包罗万象？
【发布时间】：2013-07-10 17:15:33
【问题描述】：

我正在使用 AngularJS 开发一个文件编辑应用程序。我的网址如下所示：

#/fileName.md

或

#/文件夹/文件名.md

或

#/folder/nested-folder/another-folder/itgoesonforever/filename.MD

我不想为每个深度都做一条路线，它可能有大约 15 条路线深度。有没有办法有条件路线？粗略：

/:fileorfolder?/:fileorfolder?/:fileorfolder?/:fileorfolder?

【问题讨论】：

对不起？你能解释一下吗？
我从来没有弄乱过 Angular 的路由，但我读过 Angular UI 项目的路由：github.com/angular-ui/ui-router这能满足你的需求吗？

标签： angularjs routes

【解决方案1】：

我认为你可以用 Angular 做的最好的事情是 *，这是 v1.1.5 of $routeProvider 的新功能：

path 可以包含以星号 (*name) 开头的命名组。当路由匹配时，所有字符都急切地存储在给定名称下的$routeParams。
例如，/color/:color/largecode/*largecode/edit 之类的路由将匹配 /color/brown/largecode/code/with/slashes/edit 并提取：
- color: brown
- largecode: code/with/slashes

您必须自己解析 largecode 参数。

【讨论】：

哇，正是我想要的。事后我什至不必做任何奇怪的加入，因为它全部作为单个参数传递。非常感谢！
在最近的 Angular 版本中，这已更改为 :name*。

【解决方案2】：

我想我明白了！诀窍是将模板设置为 simple ，然后修改范围以包含模板的动态路径。

所以现在我可以在/foo/bar/baz.html 放置一个文件，然后通过转到server.com/foo/bar/baz 查看呈现的模板。

// Routes
app.config( function($routeProvider) {
    $routeProvider

    // Home
    .when( '/', {
        templateUrl: 'home.html',
        controller: 'HomeController'
    })

    // Catch All
    .when( '/:templatePath*', {
        template: '<ng-include src="templatePath"></ng-include>',
        controller: 'CatchAllCtrl'
    })

});

// Catch All Controller
app.controller("CatchAllCtrl", function($scope, $routeParams) {
    $scope.templatePath = $routeParams.templatePath + '.html';
});

【讨论】：

【解决方案3】：

你可以看看使用 routeProvider#otherwise 功能

  $routeProvider
    .otherwise({controller: 'FileEditor',...});

http://docs.angularjs.org/api/ng.$routeProvider

【讨论】：

我想过这样做，但是我没有得到 routeParams，这让我的应用程序很糟糕。