Webpack: à l'aide d'exiger pour le gn-inclure

Je suis nouveau sur webpack et maintenant je l'utilise pour la première fois dans un de mes angulaire des projets.

Je veux utiliser le besoin de la fonction dans mon fichier html afin d'exiger le modèle pour une ng-inclure comme suit:

<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 de la façon dont j'en ai besoin. Avec eux, j'ai d'exiger le modèle dans un js premier et que d'utiliser le nom de modèle dans mon fichier html.

Comment faire cela?

InformationsquelleAutor Sebastian | 2015-10-30
  1. 15

    Vous pouvez utiliser webpack-requis-chargeur sur npm.

    Dans votre app js ou module js ajouter un commentaire:

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

    Et dans votre modèle, vous pouvez utiliser

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

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

    Également noter qu'il n'est pas nécessaire pour un chemin relatif dans la ng-include directive parce que c'est pris en charge par l'ajout de la //@require de commande à la tête de votre fichier d'entrée.

    Enfin, notez que vous devez utiliser des doubles et les guillemets simples pour obtenir ng-comprennent de travailler. Donc, si vous voulez faire "'template-name.html'", pas "template-name.html", ou 'template-name.html'.

    Comment config chargeurs

    • Comment avez-vous d'installation de chargeurs?
    • Salut. Dans mon dernier projet, j'utilise cette config: Webpack config loaders: ['ng-annotate','babel','required?import[]=angular'] app import angular from 'angular'; ... //@require "./components/**/index.js" //@require "./views/**/*.html" ... angular.module('sep', requiresModules) .config(onConfig) .run(onRun);
    • si vous avez des questions ou des suggestions que vous avez. Écrire ici, je vais essayer d'y répondre.
    • merci pour votre réponse très. mais pourquoi vous mettez pas à jour votre réponse avec -Ave question et le mettre dans les commentaires? 🙂
    • salut. Ajouter un lien, comment config chargeurs 🙂
    • Semble être à jour avec les nouveaux webpack erreurs comme: l'utilisation doit utiliser exigent des chargeur pas seulement besoin de.
    • Salut, @davidbuttar! Je ne vous comprends pas
    • Dans vos documents, vous dire des choses comme " loader: "ng-cache" mais quand je lance qu'il dit quelque chose comme modification de rupture, vous devez inclure -loader par exemple 'loader: "ng-cache-loader"' donc, en supposant que cette aide est hors de date. Je suis d'éviter ng-inclure maintenant, afin de ne pas avoir besoin de cela, mais pensé que je le mentionne.

    InformationsquelleAutor shanhaichik
  2. 20

    Vous pouvez utiliser du code HTML de chargeur et d'angle $templateCache service

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

    webpack chargeur config:

    {
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}
    • Merci, ça marche et c'est simple, sans chargeur supplémentaire (bien html, un chargeur est assez standard, je veux dire). Pour l'enregistrement, il travaille également avec les premières chargeur, en fonction de la configuration trouvent dans github.com/preboot/angular-webpack Pour être testé (dev / prod) pour les autres configs si l'références de fragments d'images.
    • Pour l'enregistrement, j'ai fait une variante du projet ci-dessus github.com/PhiLhoSoft/Angular-Webpack-Playground où j'ai ajouté ng-comprennent que vous montrez.
    • C'est bon, peut être utilisé sans chargeur
    InformationsquelleAutor shengbeiniao
  3. 20

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

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

    Par la suite l'utiliser:

    <my-template></my-template>
    • Merci pour les conseils!!! L'OMI et pour mon cas d'utilisation, plus simple que les autres réponses 🙂
    • C'est la bonne réponse, mais il n'est pas de répondre à la question: Quel est le ng-inclure état?
    InformationsquelleAutor simon04
  4. 3

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

    Pour l'activer, vous devez configurer le "relativeTo" paramètre, sinon votre modèle partiels chargés à "/home/nom d'utilisateur/chemin/vers/projet/chemin/vers/template/" (à Vérifier votre bundle.js vous avez probablement une fuite de votre nom d'utilisateur dans vos projets)

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

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

    Puis dans votre code, faire un effet secondaire seulement besoin d':

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

    Ensuite, vous pouvez charger le code html:

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