AngularJSが部分的にロードされるようにする方法はありますか？

190

私はこのようなルート設定をしています：

var myApp = angular.module('myApp', []).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/landing', {
            templateUrl: '/landing-partial',
            controller: landingController
        }).
        when('/:wkspId/query', {
            templateUrl: '/query-partial',
            controller: queryController
        }).
        otherwise({
            redirectTo: '/landing'
        });
}]);

私はangularjsに最初にパーシャルをダウンロードさせ、リクエストされたときではなくダウンロードさせたいと思っています。

出来ますか？

angularjs 
— ランジス・ラマチャンドラ
ソース

回答:

270

はい、これには少なくとも2つの解決策があります。

  1. scriptディレクティブ（http://docs.angularjs.org/api/ng.directive:script）を使用して、パーシャルを最初にロードされたHTMLに配置します
  2. 必要に応じて（おそらく呼び出しの結果に基づいて）JavaScriptから$templateCache（http://docs.angularjs.org/api/ng.$templateCache）に入力することもできます$http

メソッド（2）を使用して入力する場合は、次のように入力$templateCacheできます。

$templateCache.put('second.html', '<b>Second</b> template');

もちろん、テンプレートのコンテンツは$http通話から取得できます。

$http.get('third.html', {cache:$templateCache});

ここにそれらのテクニックのプランカーがあります：http ://plnkr.co/edit/J6Y2dc?p=preview

— pkozlowski.opensource
ソース
2
返信いただきありがとうございます。スクリプトタグに物を入れたくないので、テンプレートキャッシュのアイデアが好きです。どうやって使うのですか？ドキュメントが悪いです。私はそこのコメントの1つでバイオリンを見ました。しかし、私はURLからロードしたいです。
— Ranjith Ramachandra 2012
コメントに基づいて回答を更新
— pkozlowski.opensource
4
<script>サーバーサイドインクルードと一緒にインラインタグを使用することがあります。これにより、整理のためにパーシャルを個別のファイルとして保持しながら、すべてを1つのドキュメントで配信できます。
— Blazemonger 2014年
2
あるソリューションと別のソリューションを選択することでスピードが向上するかどうか知っていますか？
— Atav32
2
私はhttp呼び出しを使用してテンプレートをキャッシュしていますが、問題はキャッシュされたテンプレートの名前が次のようなURLになることです：$ http.get（ 'app / correction / templates / group-correction-table.html'、{cache：$ templateCache}）; そして、テンプレートをロードしたいときはいつでも、この醜い名前を使用する必要があります:(これは好きではありません、次のように：<td ng-include = "'app / correction / templates / group-correction-table.html' ">
— Shilan
25

Gruntを使用してプロジェクトをビルドする場合、パーシャルを$ templateCacheを準備するAngularモジュールに自動的にアセンブルするプラグインがあります。このモジュールを残りのコードと連結して、起動時に1つのファイルからすべてをロードできます。

https://npmjs.org/package/grunt-html2js

— カールゴールド
ソース
11
grunt-angular-templates同じようなことをするものもあります-npmjs.org/package/grunt-angular-templates-御馳走
— Ben Walding 2013年
これはインデックスファイルのテンプレートでも機能しますか？インデックスファイルにng-viewとng-includeがあり、アプリケーションが表示されません。
— バットマン
16

AngularでHTMLパーシャルを連結して登録するビルドタスクを追加します$templateCache。（この回答は、karlgoldの回答のより詳細な変形です。）

以下のために作男、使用作男・角度・テンプレートを。ために一気、使用ゴクゴク-角度-templatecache。

以下は、説明するconfig / codeスニペットです。

gruntfile.jsの例：

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

gulpfile.jsの例：

var templateCache = require('gulp-angular-templatecache');
var paths = ['app/partials/.html', 'app/views/.html'];

gulp.task('createTemplateCache', function () {
return gulp.src(paths)
    .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'}))
    .pipe(gulp.dest('app/scripts'));
    });

templates.js（このファイルはビルドタスクによって自動生成されます）

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...

index.html

<script src="app/scripts/templates.js"></script>
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>
— ジェームス・ロウラック
ソース
2
こんにちは@jamesこのgulpプラグインを使用しています。すべての.htmlは正しくロードされますが、ダイアログボックスプラグインの一部としてhtmlを指定しようとすると（ng-materialを使用しています）、404がスローされます。ex-$ mdDialog.show（{controller： 'entityGridCtrl'、templateUrl： 'user / partials / entityGrid.html '}）;
— Anand 2015
私のアプリ/ビューの参照をユーザー/部分に置き換えましたか？
— James Lawruk、2015
どうも。-私は私の質問投稿、パーシャルのパスを変更していないですstackoverflow.com/questions/29399453/...
— アナンド
11

各テンプレートをスクリプトタグでラップすると、次のようになります。

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

すべてのテンプレートを1つの大きなファイルに連結します。Visual Studio 2013を使用している場合は、Webの必需品をダウンロードします。HTMLバンドルを作成するための右クリックメニューが追加されます。

この男が角度$templatecacheサービスを変更するために書いたコードを追加します-それはほんの小さなコードの断片であり、機能します：Vojta Jina's Gist

その$http.getことは、あなたのバンドルファイルを使用するように変更する必要があります。

allTplPromise = $http.get('templates/templateBundle.min.html').then(

ルートtemplateUrlは次のようになります。

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );
— サイモン・ダウズウェル
ソース
0

私はちょうどeco私のために仕事をするために使用します。 ecoSprocketsはデフォルトでサポートされています。これは、ecoファイルを取得してJavascriptテンプレートファイルにコンパイルするEmbedded Coffeescriptの省略形であり、このファイルは、アセットフォルダーにある他のjsファイルと同様に扱われます。

必要なのは、拡張子が.jst.ecoのテンプレートを作成し、そこにHTMLコードを書き込むことだけです。レールは、アセットパイプラインを使用してファイルを自動的にコンパイルして提供します。テンプレートにアクセスする方法は非常に簡単ですJST['path/to/file']({var: value});。path/to/fileは論理パスに基づいているため、にファイルが/assets/javascript/path/file.jst.ecoある場合は、次の場所でテンプレートにアクセスできます。JST['path/file']()

angularjsで動作させるには、templateDirの代わりにtemplate属性に渡すと、魔法のように動作し始めます！

— 鉛筆チェック
ソース
これで問題が解決するかどうかはわかりません。プログラミング言語を変更することはおそらくやり過ぎです。
— xdhmoore 2014年
0

$ stateをコントローラーに渡し、ページがロードされてコントローラーのゲッターを呼び出すときに、$ state.go（ 'index'）またはロードするパーシャルを呼び出すことができます。できました。

— rj905
ソース
-1

別の方法は、HTML5のアプリケーションキャッシュを使用することですすべてのファイルを一度ダウンロードし、ブラウザのキャッシュに保存することです。上記のリンクには、さらに多くの情報が含まれています。以下の情報は記事からのものです。

<html>タグを変更して、manifest属性ます。

<html manifest="http://www.example.com/example.mf">

マニフェストファイルはmime-typeで提供する必要がありますtext/cache-manifest。

単純なマニフェストは次のようになります。

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

アプリケーションがオフラインになると、次のいずれかが発生するまでキャッシュされたままになります。

  1. ユーザーがサイトのブラウザのデータストレージをクリアします。
  2. マニフェストファイルが変更されます。注：マニフェストにリストされているファイルを更新しても、ブラウザがそのリソースを再キャッシュするわけではありません。マニフェストファイル自体を変更する必要があります。
— ブレントウォッシュバーン
ソース
1
残念ながら、この機能は非推奨になりましたdeveloper.mozilla.org/en-US/docs/Web/HTML/…ですので、ご注意ください。このアプローチは自己責任で使用してください
— Lazy Coder
HTML標準によれば、「この機能はWebプラットフォームから削除されています（これは何年もかかる長いプロセスです）。」 2016年の初め。今のところ、私はアプリケーションキャッシュが自分のアプリケーションで適切に機能するため、まだアプリケーションキャッシュを使用しています。
— ブレントウォッシュバーン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.