2014-10-21 20 views
8

Sto cercando aiuto nell'utilizzo di webpack per un'applicazione AngularJS di grandi dimensioni. Stiamo usando la struttura delle cartelle in base alle funzionalità (ogni funzione/pagina ha un modulo e hanno controller, direttive). Ho configurato con successo webpack per farlo funzionare con Grunt, che produce un singolo bundle. Voglio creare blocchi perché diventerà un'app di grandi dimensioni, vorremmo caricare in modo asincrono i moduli (pagina/funzionalità).Integrazione AngularJS e Webpack

Sto esaminando alcuni esempi di webpack per utilizzare 'code splitting' utilizzando la sintassi require([deps],fn). Tuttavia non ho potuto ottenere i pezzi pigri. Prima di tutto, non so esattamente dove, avrei bisogno di importare questi blocchi prima che AngularJS indirizzasse l'utente alla pagina successiva. Sto lottando per trovare una chiara separazione di responsabilità.

Qualcuno mi ha indirizzato a un esempio di applicazione AngularJS in cui webpack viene utilizzato per caricare controller/direttive/filtri in modo asincrono dopo ogni instradamento?

Pochi dei collegamenti Seguo: Should I use Browserify or Webpack for lazy loading of dependancies in angular 1.x https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com/posts/code/single-page-modules-with-webpack.html

risposta

12

Sagar Ganatra ha scritto un utile blog post sul codice splitting.

Sorprendentemente la divisione del codice non è realmente supportata dal sistema di moduli angolari. Tuttavia, esiste un modo per ottenere la divisione del codice salvando un riferimento ai provider speciali di angular durante la fase di configurazione.

[...] quando Angular inizializza o avvia l'applicazione, funzioni - controller, servizio ecc. sono disponibili sull'istanza del modulo. Qui, siamo pigri a caricare i componenti e le funzioni non sono disponibili in un secondo momento; pertanto dobbiamo utilizzare le varie funzioni del provider e registrare questi componenti. I provider sono disponibili solo nel metodo config e quindi dovremo memorizzare un riferimento di questi provider nella funzione config quando l'applicazione viene inizializzata.

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 
     }; 

    } 
]); 

Ora all'interno del vostro loginController per esempio si scrive

app.components.controller('loginController'); 

per definire il nuovo controller pigramente.

Se si desidera caricare a fondo i propri modelli, si consiglia di utilizzare ui-router. Ci si può specificare un templateProvider che è basically a function to load templates async

+0

grazie, trovo anche che chiamare $ applicare per molte volte non è corretto .. http://stackoverflow.com/questions/12729122/prevent-error-digest-already-in-progress -quando-calling-scope-apply forse una volta per ogni percorso dovrebbe essere ok, credo. – CoderTR

+0

Sì, probabilmente hai ragione.Fondamentalmente devi decidere: attendo che ogni componente venga caricato prima di chiamare $ apply o faccio propagare l'aggiornamento il prima possibile. –

2

Questa è una citazione da https://github.com/webpack/webpack/issues/150

webpack è un non bundler modulo di un caricatore javascript. Imballa i file dal disco locale e non carica i file dal web (eccetto i propri chunk).

Utilizzare un caricatore javascript, i. e. script.js

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