Intégration AngularJS et Webpack

Je cherche de l'aide pour l'utilisation d'un webpack pour une grande application AngularJS. Nous utilisons la structure des dossiers en fonction de la fonctionnalité (chaque fonctionnalité / page possède un module et ont des contrôleurs, des directives). J'ai réussi à configurer Webpack pour le faire fonctionner avec Grunt, qui produit un seul lot. Je veux créer des blocs car il va s'agir d'une grande application, nous voudrions charger des éléments de modules (page / fonctionnalité) de manière asynchrone.

Je suis en train de passer à travers un exemple de Webpack pour utiliser 'code splitting' utilisant la syntaxe require([deps],fn ) . Cependant, je ne pouvais pas obtenir les morceaux paresseux. Tout d'abord, je ne sais pas où exactement, j'aurais besoin d'importer ces morceaux avant que AngularJS achemine l'utilisateur vers la page suivante. Je lutte pour trouver une séparation claire de responsabilité.

Est-ce que quelqu'un m'a pointé vers un exemple d'application AngularJS où le webpack sert à charger les contrôleurs / directives / filtres de manière asynchrone après chaque route?

Peu de liens que je suivez: Devrais-je utiliser Browserify ou Webpack pour le chargement par défaut de dépendances dans angular 1.x https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com /posts/code/single-page-modules-with-webpack.html

Sagar Ganatra a écrit une publication de blog utile sur le partage de code.

Le système de module angulaire ne supporte pas vraiment le fractionnement du code. Cependant, il existe un moyen d'obtenir un partage de code en enregistrant une référence aux fournisseurs spéciaux d'angular pendant la phase de configuration.

[…] lorsque Angular initialise ou amorce l'application, fonctions – contrôleur, service, etc. Sont disponibles sur l'instance du module. Ici, nous sommes embarrassés de charger les composants et les fonctions ne sont pas disponibles ultérieurement; Par conséquent, nous devons utiliser les différentes fonctions du fournisseur et enregistrer ces composants. Les fournisseurs sont disponibles uniquement dans la méthode de configuration et, par conséquent, nous devrons stocker une référence de ces fournisseurs dans la fonction de configuration lorsque l'application est initialisée.

 window.app.config([ '$routeProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) { $routeProvider.when('/login', { templateUrl: 'components/login/partials/login.html', resolve: { load: ['$q', '$rootScope', function ($q, $rootScope) { var deferred = $q.defer(); // lazy load controllers, etc. require ([ 'components/login/controllers/loginController', 'components/login/services/loginService' ], function () { $rootScope.$apply(function () { deferred.resolve(); }); }); return deferred.promise; }] } }); //store a reference to various provider functions window.app.components = { controller: $controllerProvider.register, service: $provide.service }; } ]);

Maintenant, dans votre loginController de loginController par exemple, vous écrivez

 app.components.controller('loginController');

Pour définir votre nouveau contrôleur paresseusement.

Si vous souhaitez charger vos modèles aussi, je recommande d'utiliser ui-router . Vous pouvez spécifier un templateProvider qui est essentiellement une fonction pour charger des modèles asynchrones

Ceci est une citation de https://github.com/webpack/webpack/issues/150

Le webpack est un module bundler pas un javascript loader. Il emploie des fichiers depuis un disque local et ne charge pas de fichiers sur le Web (sauf ses propres blocs).

Utilisez un chargeur javascript, c'est-à-dire script.js

 var $script = require("scriptjs"); $script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() { // ... });