15

これはおそらく言葉遣いが悪いですが、私の既存の Angular 1 プロジェクトでは、HTML2JS を使用して JS ファイルにプリコンパイルされた一連の HTML リソースを使用しています。HTML2JS は更新されていないため、すべてが 2 つの戦略を中心に展開しているようです。

まず、@tempate atScript 内に HTML インラインを追加します。これによりキャッシュされるため、常にサーバーにアクセスすることはありませんが、IDE でのフォーマットが難しくなり、読みやすさが低下します。

2 つ目は、外部ファイルを使用し、@template 内の URL を使用することです。これにより、読みやすくなりますが、キャッシュの量が制限されます。これは、回避したいより大きなサーバー呼び出しを行う必要があることを意味します。

ファイルを HTML で開始し、.js ファイルにコンパイルして Angular2 コンポーネントに含める方法はありますか?

4

2 に答える 2

7

gulp を使用してコンパイルしている場合は、angular-embed-templates プラグインを使用できます。ここでは、ソース マップを使用して、dist フォルダーで JavaScript にコンパイルする前に、templateUrl をテンプレートに読み込みます。

var gulp           = require('gulp');
var ts             = require('gulp-typescript');
var sourcemaps     = require('gulp-sourcemaps');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('ts:build', function () {
    gulp.src('app/**/*.ts')
        .pipe(embedTemplates())
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            module: 'system',
            target: 'ES5',
            experimentalDecorators: true,
            moduleResolution: 'node',
            emitDecoratorMetadata: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist'));
});
于 2015-12-24T22:51:52.227 に答える
1

Webpack は新しい Gulp であるため (Gulp にも助けが必要です)、ここに私が思いついたものがあります (スタイラスとジェイドを使用) ...

このようなWebpackローダーを使用してください...

loaders: [
  {
    include: /\.pug/,
    loader: 'pug-html-loader'
  },
  {
    test: /\.styl$/,
    loader: 'style-loader!css-loader!stylus-loader'
  },
  {
    test: /\.ts$/,
    loader: 'ts'
  }
]

次に、このようにコンポーネントでrequireを使用します...

@Component({
    ...
    template: String(require('./navbar.component.pug')),
    styles: [String(require('./navbar.component.styl'))],
    ...
})

stylesandtemplateの代わりにtemplateUrlandを必ず使用してくださいstyleUrls

于 2016-06-30T17:31:31.593 に答える