88

現在、ルーティングが組み込まれたAngularJSアプリケーションがあります。これは機能し、すべて問題ありません。

私のapp.jsファイルは次のようになります。

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });
      $routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });
      $routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });
      $routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });
      $routeProvider.otherwise({ redirectTo: '/' });
  }]);

私のアプリにはCMSが組み込まれており、 /pagesディレクトリ内に新しいhtmlファイルをコピーして追加できます。

動的に追加された新しいファイルであっても、ルーティングプロバイダーを経由したいと思います。

理想的な世界では、ルーティングパターンは次のようになります。

$ routeProvider.when（'/ pagename '、{templateUrl：'/ pages / pagename .html'、コントローラー：CMSController}）;

したがって、新しいページ名が「contact.html」の場合、Angularで「/contact」を取得して「/pages/contact.html」にリダイレクトしたいと思います。

これも可能ですか？！もしそうならどうやって？！

アップデート

私は今私のルーティング設定にこれを持っています：

$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })

そして私のCMSControllerで：

function CMSController($scope, $route, $routeParams) {
    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
    alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

これにより、現在のtemplateUrlが正しい値に設定されます。

ただし、新しいtemplateUrl値でng-viewを変更したいと思います。これはどのように達成されますか？

4

7 に答える 7

133 
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
        config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/page/:name*', {
            templateUrl: function(urlattr){
                return '/pages/' + urlattr.name + '.html';
            },
            controller: 'CMSController'
        });
    }
]);
  • * を追加すると、複数レベルのディレクトリを動的に操作できます。例: /page/cars/selling/listはこのプロバイダーでキャッチされます

ドキュメントから（1.3.0）：

"templateUrl が関数の場合、次のパラメーターで呼び出されます。

{Array.} - 現在のルートを適用して、現在の $location.path() から抽出されたルート パラメータ"

また

when(path, route) : メソッド

  • パスには、コロンで始まり星印で終わる名前付きグループを含めることができます (例:name*)。ルートが一致すると、すべての文字が所定の名前で $routeParams に格納されます。
于 2014-05-22T13:14:50.363 に答える
37

わかりました。

ソリューションを GitHub に追加しました- http://gregorypratt.github.com/AngularDynamicRouting

私のapp.jsルーティング構成では：

$routeProvider.when('/pages/:name', {
    templateUrl: '/pages/home.html', 
    controller: CMSController 
});

次に、CMSコントローラーで：

function CMSController($scope, $route, $routeParams) {

    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";

    $.get($route.current.templateUrl, function (data) {
        $scope.$apply(function () {
            $('#views').html($compile(data)($scope));
        });
    });
    ...
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

#views が私の<div id="views" ng-view></div>

そのため、標準ルーティングと動的ルーティングで機能するようになりました。

それをテストするために、私は about.html をコピーして、portfolio.html と呼び、その内容の一部を変更/#/pages/portfolioしてブラウザに入力したところ、Presto ポートフォリオ.html が表示されました....

更新 動的コンテンツを挿入できるように、html に $apply と $compile を追加しました。

于 2012-12-03T11:02:25.590 に答える
7

$ routeProvider URIパターンでは、次のような変数パラメーターを指定$routeProvider.when('/page/:pageNumber' ...し、$routeParamsを介してコントローラーでアクセスできます。

$ routeページの最後に良い例があります：http：//docs.angularjs.org/api/ng.$ro​​ute

編集（編集された質問の場合）：

ルーティングシステムは残念ながら非常に限られています。このトピックについては多くの議論があり、いくつかの解決策が提案されています。つまり、複数の名前付きビューを作成するなどです。しかし、現在、ngViewディレクティブはルートごとに1つのビューしか提供していません。 1対1ベース。これは複数の方法で行うことができます。より簡単な方法は、ビューのテンプレートをローダーとして使用し、<ng-include src="myTemplateUrl"></ng-include>タグを含めることです（$ scope.myTemplateUrlはコントローラーで作成されます）。

私はより複雑な（しかし、より大きく、より複雑な問題の場合はよりクリーンな）ソリューションを使用し、基本的に$ routeサービスを完全にスキップします。これについては、以下で詳しく説明します。

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

于 2012-12-03T10:22:29.047 に答える