3

angular.jsでファイルエクスプローラーを作っています。だから、私はいくつかの長いURLを扱います、

例えば：

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

私は角度を学び、角度が $routeProvider を持っていることを知りましたが、これを機能させるには「いつ」をたくさん書く必要があるようです (「いつ」を定義しないとテンプレートは使用されません)。

サブディレクトリのすべてのパスが同じテンプレートを使用するように、角度は「*」をサポートしていますか?

または、これを処理する他の方法はありますか？どうも。

4

3 に答える 3

2

$routeProvider は現在ワイルドカードをサポートしていないため (ここと回答の 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-17T03:33:48.760 に答える
1

AngularJS 1.2 (現在はリリース候補段階) 以降では、ワイルドカードを使用してより多くのパスに一致させることができます。新しいドキュメントから：

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はその依存関係の 1 つとして宣言する必要があります。コードは次のようになります。

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-21T23:00:11.680 に答える
1

繰り返さないでください！

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-21T22:49:27.730 に答える