1. ホーム
  2. javascript

[解決済み] AngularJSの動的ルーティング

2023-05-04 09:25:05

質問

現在、ルーティングを組み込んだ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を内蔵しており、新しいhtmlファイルをコピーして /pages ディレクトリ内に新しいHTMLファイルをコピーして追加することができます。

私は、新しい動的に追加されたファイルであっても、ルーティングプロバイダを通過させたいと考えています。

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

$routeProvider.when('/') ページ名 ', { templateUrl: '/pages/ ページ名 .html', controller: 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を正しい値に設定します。

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

どのように解決するのですか?

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'
        });
    }
]);

  • を追加することで 複数レベルのディレクトリ を動的に実行します。 例 /ページ/車/販売/リスト はこのプロバイダでキャッチされます

docs (1.3.0)から。

"templateUrlが関数である場合、それは以下のパラメータで呼び出されます。 パラメータで呼び出されます。

{Array.} - を適用して抽出されたルートパラメータ。 $location.path()に現在のルート"を適用することで抽出されます。

また

<ブロッククオート

when(path, route) : メソッド

  • path は、コロンで始まり星で終わる名前付きグループを含むことができます: 例:name*. ルートがマッチすると、すべての文字が与えられた名前の下で$routeParamsにeagerly格納されます。