web-dev-qa-db-ja.com

Webpack：ng-includeにrequireを使用

私はwebpackを初めて使用し、今はangularプロジェクトの1つで初めて使用しています。

次のようなng-includeのテンプレートを要求するために、htmlファイルでrequire関数を使用します。

<div ng-include="require(./my-template.html)"></div>

Ng-cacheやngtemplateのようなローダーがあることは知っていますが、必要な方法で動作しません。それらを使用して、最初にjsのテンプレートを要求し、次にhtmlファイルでテンプレート名を使用する必要があります。

これを達成する方法は？

javascriptangularjswebpackangularjs-ng-include
25
Sebastian

Npmで webpack-required-loader を使用できます。

アプリjsまたはモジュールjsにコメントを追加します。

//@require "./**/*.html"

テンプレートで使用できます

<div ng-include="'my-template.html'"></div>

Ngtemplateは正常に動作します。 ng-cacheも機能します。

また、ng-includeディレクティブに相対パスは必要ないことに注意してください。これは、エントリファイルの先頭に//@requireコマンドを追加することで処理されるためです。

最後に、ng-includeを機能させるには二重引用符と単一引用符を使用する必要があることに注意してください。したがって、"'template-name.html'"や"template-name.html"ではなく、'template-name.html'を実行します。

ローダーの設定方法

15
shanhaichik

HTMLローダーとangular $ templateCacheサービスを使用できます

angular
    .module('template',[])
    .run(['$templateCache', function($templateCache) {
        var url = 'views/common/navigation.html';
        $templateCache.put(url, require(url));
    }]);

webpackローダー設定：

{
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}
20
shengbeiniao

別のアプローチは、my-template.html into angular component ： html-loader を使用してHTMLファイルをロードすると仮定します（loaders: {test: /\.html/, loader: 'html'}）、モジュールのJavaScriptファイルでコンポーネントmyTemplateを定義します。

import myTemplate from './my-template.html';
angular.module(...)
  .component('myTemplate', {template: myTemplate})

後でそれを使用します：

<my-template></my-template>
20
simon04

私はすでにこれを https://stackoverflow.com/a/34815472/83309 に投稿していますが、

「relativeTo」パラメーターを設定する必要があります。そうしないと、テンプレートのパーシャルが「/ home/username/path/to/project/path/to/template /」にロードされます（おそらくbundle.jsをリークしているので、プロジェクトのユーザー名）

var ngTemplateLoader = (
    'ngtemplate?relativeTo=' + path.resolve(__dirname, './src/') +
    '!html'
);

module.exports = {
    ...
    module: {
        loaders: [
            {test: /\.html$/, loader: ngTemplateLoader},
        ],
    },
    ...
}

次に、コードで、次を必要とするだけの副作用を実行します。

// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');

次に、htmlをロードできます。

<div ng-include src="'/webapp/templates/path/to/template.html'"</div>
3
Thomas Grainger