[解決済み] AngularJSの動的ルーティング
質問
現在、ルーティングを組み込んだ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格納されます。
関連
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる