2013-07-10 9 views
5

私はAngularJSのファイル編集アプリケーションに取り組んでいます。私のURLは次のようになります。AngularJSキャッチオールルート?

#/ fileName.md

または

#/フォルダ/ fileName.md

または

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

1つの深度ごとにルートを作成する必要はなく、〜15ルートの深さにすることができます。条件付きルートを持つ方法はありますか?ぞんざい:

/:fileorfolder?/:fileorfolder?/:fileorfolder?/:fileorfolder? 
+0

*のように? ( – Ven

+0

申し訳ありませんか?説明できますか? – wesbos

+0

私はAngularのルーティングに悩まされたことはありませんでしたが、私はAngular UIプロジェクトのルータを読んでいます:https://github.com/angular-ui/ui-router ? –

答えて

15

私はあなたが角度にできる最善のv1.1.5 of $routeProviderのように新しいです*、だと思います。

path cont星から始まる名前のグループ(​​)。すべての文字は、ルートが一致すると、与えられた名前で$routeParamsに熱心に格納されます。 color: brown
- - largecode: code/with/slashes

あなたはlargecodeはしかし、自分自身をPARAM解析する必要があるだろう

たとえば、/color/:color/largecode/*largecode/editのようなルートが/color/brown/largecode/code/with/slashes/editとエキスと一致します。

+0

うわー、まさに私が望んでいたものです。ありがとうございました! – wesbos

+2

最近のバージョンのangleでは、これが ':name *'に変更されました。 –

2

あなたがそうでなければ機能routeProvider#を使用して見て可能性があり

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

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

+0

私はこれをやろうと考えていましたが、私のアプリを怒らせるルートパラームスを手に入れません – wesbos

6

私はそれを持っていると思います!トリックは、テンプレートをシンプルに設定して、テンプレートへの動的パスを含めるようにスコープを変更することです。

ここでファイルを/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'; 
});