AngularJS - ディレクティブとテンプレートの組み合わせをモジュール化するにはどうすればよいですか?

StackOverflow https://stackoverflow.com//questions/24045499

  •  21-12-2019
  •  | 
  •  

質問

状況は次のとおりです。templateUrl に依存するディレクティブがあります。

ディレクティブは次のようになります。

angular.module('foo')
.directive('bar', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/foo/bar.html',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

このディレクティブは私のアプリケーションの一部であり、アプリケーションの一部として残すことが重要です。ただし、他のプロジェクトでも同じディレクティブを使用したいと考えており、現在 bower を使用してリポジトリを他のプロジェクトにプルダウンしています。ただし、templateUrl が正しくないため、このディレクティブは壊れます。Bower は私のプロジェクト全体をクローンします。他のプロジェクトでは、テンプレートの実際のパスはせいぜい次のようになります。

/lib/public/foo/bar.html

他の人はどうやってこれを管理しているのでしょうか？

役に立ちましたか？

解決

保守性の問題のため、私はテンプレート文字列をテンプレートに使用するのが好きではありませんでした。私は HTML のプロトタイプを非常に迅速に作成するため、ファイルを読み取って 1 つのファイルに処理する単調なタスクを選択します。 $templateCache jsファイル。

解決

Grunt Angular テンプレート

$ templatecacheでangularjsテンプレートを連結および登録するためのグラントビルドタスク

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html', // where my view files are
      dest:     'src/templates.js' // single file of $templateCache
    }
  }
  // ...
});

次のようなものを生成します: ./src/templates.js これにより、フォルダー構造が保存されます。

angular.module('angular-my-directives').run(['$templateCache', function($templateCache) {

  $templateCache.put('views/directives/my-download.html',
    "<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);

私のディレクティブでは、単に使用できます templateUrl: 'views/directives/my-download.html' $templateCache を使用します。

最後に使用しました grunt-contrib-concat ファイルを結合して簡単にロードできるようにします。

チェックアウト "Grunt concat + uglify とソースマップ" (またはコメントに適切なリンクを残す) を参照して、js ファイルを 1 つの "dist" ファイルに連結 + uglify (別名 min) する方法を学習してください。

独自のカスタム Bower パッケージを作成している場合。

パッケージ利用者が簡単にインクルードできるように、連結された (別名ビルドされた) ファイルをパッケージ リポジトリにコミットしてください。 my-concat-package.js または my-concat-package.min.js

他のヒント

Angular ディレクティブには、 templateUrl そして template プロパティ。 template HTML文字列を受け取ります。HTML を JS に組み込む必要があるため、これは完璧な解決策ではありません。ただし、ライブラリ作成者が HTML 文字列を直接配置するのは一般的なパターンです。 template プロパティを使用して、モジュールを単一のファイルにラップできます。

その templateUrl-to-template をライブラリのビルド ステップにしたい場合があります。

見てみましょう Angular Bootstrap Bower リポジトリ.

これに対する 1 つの解決策、そして私が個人的に推奨する解決策は、テンプレートを $templateCache で Module.run 関数。そうすれば、URL が間違ったものを参照していることを心配する必要がなく、任意の識別 URL を指定できます。また、そのテンプレートを取得して起動するために http リクエストが必要になることもありません。

your-directive プロジェクト内:

xyz.tpl.html ファイル名ですべてのテンプレートを作成し、すべての JS コードを含む your-directive dir に置きます。すべての templateUrl は次のようになります

テンプレートURL:'/template/my.tpl.html'

アプリプロジェクト内:

プロジェクト内に gulp/grunt タスクを作成し、すべての *.tpl.html ファイルを bower_components (デフォルト) から /template/ dir にコピーします。

例えば。：

// copy template files
gulp.task('copy-tpl', function() {
    return gulp.src([
        config.dirs.src.bower_components + '/**/*.tpl.html'
    ])
            .pipe(flatten())
            .pipe(gulp.dest(config.dirs.build.tpl));
});

重要！/template ディレクトリは (js、css などの) 規則です。

これを行うことができます ゴクゴク 使用して gulp-angular-templatecache.

ディレクティブは次のようになります。

angular.module('foo').directive('bar', function($templateCache){
  return {
    restrict: 'E',
    replace: true,
    template: '$templateCache.get('bar.html')',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

そしてあなたの gulpfile.js 次のようになります:

var gulp = require('gulp'),
    addTemplates = require('gulp-angular-templatecache');

gulp.task('default', function() {
    gulp.src('templatesDir/**/*.html')
        .pipe(addTemplates('templateFile.js', {module: 'foo' }))
        .pipe(gulp.dest('dist'));
});

これにより、dist フォルダーにファイル「templateFile.js」が生成され、ディレクティブ ファイルと一緒に bower.json にパッケージ化できます。

もうあげました 答え grunt を使用して HTML ファイルを $templateCache ファイルにビルドしていましたが、その後 gulp に切り替えたので、gulp を使用して同じプロセスを実行したいと考えている人は、チェックアウトしてください。 gulp-angular-templatecache

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top