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 が要求されたときではなく、最初にパーシャルの両方をダウンロードできるようにしたいと考えています。

出来ますか？

4

8 に答える 8

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

于 2012-09-10T07:16:44.657 に答える
25

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

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

于 2013-04-20T21:30:43.743 に答える
16

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

gruntの場合、 grunt-angular-templatesを使用します。gulpの場合、 gulp -angular-templatecacheを使用します。

以下は、説明する構成/コードのスニペットです。

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>
于 2014-12-11T20:07:35.167 に答える
11

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

<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 Essentials をダウンロードします。右クリック メニューが追加され、HTML バンドルが作成されます。

この男がAngularサービスを変更するために書いたコードを追加してください$templatecache- それはほんの小さなコードであり、動作します: Vojta Jina's Gist

バンドル$http.getファイルを使用するように変更する必要があります。

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

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

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );
于 2014-02-03T10:48:34.580 に答える
2

Rails を使用している場合は、アセット パイプラインを使用して、すべての haml/erb テンプレートをコンパイルし、application.js ファイルに追加できるテンプレート モジュールに押し込むことができます。チェックアウト http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

于 2013-04-28T12:09:10.507 に答える
0

$state をコントローラーに渡すことができます。次に、ページが読み込まれ、コントローラーで getter が呼び出されたときに、 $state.go('index') または読み込みたいパーシャルを呼び出します。終わり。

于 2016-09-16T17:16:33.273 に答える
0

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

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

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

于 2013-06-24T08:56:31.660 に答える
-1

もう 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. マニフェスト ファイルが変更されます。注: マニフェストにリストされているファイルを更新しても、ブラウザーがそのリソースを再キャッシュするわけではありません。マニフェスト ファイル自体を変更する必要があります。
于 2015-12-18T22:01:31.020 に答える