web-dev-qa-db-fra.com

Webpack: utilisation de require pour ng-include

Je suis nouveau sur webpack et en ce moment je l'utilise pour la première fois dans l'un de mes projets angular.

Je veux utiliser la fonction require dans mon fichier html afin d'exiger le modèle pour un ng-include comme ceci:

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

Je sais qu'il existe des chargeurs comme ng-cache et ngtemplate, mais ils ne fonctionnent pas comme j'en ai besoin. Avec eux, je dois d'abord exiger le modèle dans un js et utiliser le nom du modèle dans mon fichier html.

Comment y parvenir?

javascriptangularjswebpackangularjs-ng-include
25
Sebastian

Vous pouvez utiliser webpack-required-loader sur npm.

Dans votre application js ou module js, ajoutez un commentaire:

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

Et dans votre modèle, vous pouvez utiliser

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

Ngtemplate fonctionnera très bien. Ng-cache fonctionne aussi.

Notez également qu'il n'y a pas besoin d'un chemin relatif dans le ng-include directive parce que cela est pris en charge en ajoutant le //@require commande en tête de votre fichier d'entrée.

Enfin, notez que vous devez utiliser des guillemets doubles et simples pour que ng-include fonctionne. Vous feriez donc "'template-name.html'", ne pas "template-name.html", ou 'template-name.html'.

Comment configurer les chargeurs

15
shanhaichik

Vous pouvez utiliser le chargeur HTML et le service angular $ templateCache

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

configuration du chargeur webpack:

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

Une autre approche consisterait à transformer my-template.html dans un composant angulaire : en supposant que vous utilisez html-loader pour charger vos fichiers HTML (loaders: {test: /\.html/, loader: 'html'}), définissez un composant myTemplate dans le fichier JavaScript de votre module:

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

Ensuite, utilisez-le:

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

J'ai déjà posté cela sur https://stackoverflow.com/a/34815472/83309 mais:

Pour l'activer, vous devez configurer le paramètre "relativeTo", sinon les partiels de votre modèle seront chargés dans "/ home/username/path/to/project/path/to/template /" (Vérifiez votre bundle.js, vous perdez probablement votre nom d'utilisateur dans vos projets)

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

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

Ensuite, dans votre code, un effet secondaire nécessite uniquement:

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

Ensuite, vous pouvez charger le html:

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