[解決済み] AngularJSでビュー/部分固有のスタイリングを含む方法
質問
私のアプリケーションが使用する様々なビューのために別々のスタイルシートを使用するための適切な/受け入れられた方法は何ですか?
現在、私はビュー/パーシャルのhtmlの一番上にlink要素を配置していますが、すべてのモダンブラウザがそれをサポートしているにもかかわらず、私はこれが悪い習慣であると言われましたが、私はそれが嫌われる理由を理解することができます。
もうひとつの可能性は、別々のスタイルシートをindex.htmlの
head
の中に置くことですが、パフォーマンスの名目でそのビューがロードされている場合にのみスタイルシートをロードするようにしたいのです。
スタイルシートがサーバーから読み込まれるまで有効にならないので、遅いブラウザで書式なしコンテンツの迅速なフラッシュにつながるので、これは悪い習慣でしょうか?ローカルでテストしていますが、私はまだこれを目撃したことがありません。
に渡されたオブジェクトを通してCSSをロードする方法はありますか?
$routeProvider.when
?
ありがとうございました。
どのように解決するのですか?
この質問はもう古いのですが、この問題に対するさまざまな解決策を大量に調べた結果、よりよい解決策を思いついたかもしれません。
UPDATE 1: この回答を投稿してから、私はこのコードをすべてGitHubに投稿したシンプルなサービスに追加しました。 レポは次の場所にあります。 ここにあります。 . より詳細な情報を得るために、自由にチェックしてください。
UPDATE 2: この回答は、ルート用のスタイルシートを取り込むための軽量なソリューションが必要な場合に最適です。もし、アプリケーション全体でオンデマンドスタイルシートを管理するためのより完全なソリューションが必要であれば、次のものをチェックアウトしたいかもしれません。 Door3のAngularCSSプロジェクト . これは、より細かい機能を提供します。
将来の誰かが興味を持つかもしれないので、私が思いついたものを紹介します。
1. のカスタムディレクティブを作成します。
<head>
要素にカスタムディレクティブを作成します。
app.directive('head', ['$rootScope','$compile',
function($rootScope, $compile){
return {
restrict: 'E',
link: function(scope, elem){
var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
elem.append($compile(html)(scope));
scope.routeStyles = {};
$rootScope.$on('$routeChangeStart', function (e, next, current) {
if(current && current.$$route && current.$$route.css){
if(!angular.isArray(current.$$route.css)){
current.$$route.css = [current.$$route.css];
}
angular.forEach(current.$$route.css, function(sheet){
delete scope.routeStyles[sheet];
});
}
if(next && next.$$route && next.$$route.css){
if(!angular.isArray(next.$$route.css)){
next.$$route.css = [next.$$route.css];
}
angular.forEach(next.$$route.css, function(sheet){
scope.routeStyles[sheet] = sheet;
});
}
});
}
};
}
]);
このディレクティブは以下のことを行います。
-
コンパイル(
$compile
のセットを作成する html 文字列をコンパイルします。<link />
タグのセットを作成します。scope.routeStyles
オブジェクトの各項目をng-repeat
とng-href
. -
それは、そのコンパイルされたセットの
<link />
要素を<head>
タグに追加します。 -
そして、その後に
$rootScope
をリッスンするために'$routeChangeStart'
のイベントをリッスンします。 すべての'$routeChangeStart'
イベントごとに、quot;current" を取得します。$$route
オブジェクト (ユーザが去ろうとしているルート) を取得し、その部分固有の css ファイル (複数可) を<head>
タグから削除します。 また、"next"$$route
オブジェクト (ユーザーが移動しようとしているルート) を取得し、その部分固有の css ファイル (複数可) を<head>
タグに追加します。 -
そして、その
ng-repeat
の部分は、コンパイルされた<link />
タグは、ページ固有のスタイルシートの追加と削除のすべてをscope.routeStyles
オブジェクトに追加されたり削除されたりするものに基づいて、 ページ固有のスタイルシートの追加と削除をすべて行います。
注意してください。
このためには、あなたの
ng-app
属性が
<html>
要素ではなく
<body>
の内部でもなく
<html>
.
2. どのスタイルシートがどのルートに属しているかは
$routeProvider
:
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/some/route/1', {
templateUrl: 'partials/partial1.html',
controller: 'Partial1Ctrl',
css: 'css/partial1.css'
})
.when('/some/route/2', {
templateUrl: 'partials/partial2.html',
controller: 'Partial2Ctrl'
})
.when('/some/route/3', {
templateUrl: 'partials/partial3.html',
controller: 'Partial3Ctrl',
css: ['css/partial3_1.css','css/partial3_2.css']
})
}]);
この設定により、カスタム
css
プロパティを各ページのルートを設定するために使われるオブジェクトに追加します。 そのオブジェクトは、それぞれの
'$routeChangeStart'
イベントに
.$$route
. そのため
'$routeChangeStart'
イベントをリスニングしているとき、私たちは
css
プロパティを取得し、それらの
<link />
タグを追加・削除します。 ただし
css
プロパティの指定は完全に任意であることに注意してください。
'/some/route/2'
の例で省略したように、完全に任意です。もしルートに
css
プロパティがない場合は
<head>
ディレクティブはそのルートに対して単に何もしません。 また、ルートごとに複数のページ固有のスタイルシートを持つことができることに注意してください。
'/some/route/3'
の例のように、ルートごとに複数のページ固有のスタイルシートを持つこともできることに注意してください。
css
プロパティは、そのルートに必要なスタイルシートへの相対パスの配列です。
3. 完了です この2つが必要なものをすべてセットアップし、私の意見では、可能な限りきれいなコードでそれを行っています。
私と同じようにこの問題で苦労している他の誰かの助けになることを願っています。
関連
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] AngularJSでチェックボックスの値のリストにバインドするにはどうすればいいですか?
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] AngularJSのng-optionsでvalueプロパティを設定するには?
-
[解決済み] AngularJSの部分的なビューに基づいて動的にヘッダーを変更するには?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】CSSのクラスとidの共通命名規則
-
[CSSチュートリアル】CSSを解析して、画像のテーマカラー機能を抽出する(コツ)
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[CSSレイアウト例】CSSで中央揃えを実現する方法N種
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方