AngularJS und Webpack Integration

Ich bin auf der Suche nach Hilfe bei der Verwendung webpack für eine große AngularJS-Anwendung. Wir sind mit Ordner-Struktur auf der Basis von Funktion (jede Funktion/Seite hat ein Modul und Controller, Direktiven). Ich habe erfolgreich konfiguriert webpack, um es arbeiten mit Grunt, produziert, die ein einziges Bündel. Ich will Brocken wie sein gehen, eine große app, möchten wir Module zu laden (Seite/Funktion) Artefakte zu vermeiden.

Ich werde durch einige der webpack Beispiel 'code splitting' mit require([deps],fn ) syntax. Allerdings hätte ich nicht die Brocken faul geladen. Zunächst, ich weiß nicht, wo genau ich brauchen würde, um diese zu importieren Brocken vor AngularJS würde die route, die der Benutzer zur nächsten Seite. Ich bin kämpfen, um zu finden, die eine klare Trennung der Verantwortung.

Hat Ihnen jemand zeigen Sie mir ein Beispiel AngularJS-Anwendung, wo webpack verwendet wird, laden Sie Controller/- Richtlinien/- Filter asynchron nach jeder route?

Paar der links bin ich folgende:
Sollte ich Browserify oder Webpack für lazy loading von Abhängigkeiten in den Winkel-1.x
https://github.com/petehunt/webpack-howto#9-async-loading
http://dontkry.com/posts/code/single-page-modules-with-webpack.html

InformationsquelleAutor CoderTR | 2014-10-21
  1. 12

    Sagar Ganatra schrieb eine hilfreiche blog-post über code-splitting).

    Überraschend code splitting ist nicht wirklich unterstützt durch Winkel-Modul-system. Es gibt jedoch einen Weg, das zu erreichen-code-teilen durch das speichern einer Referenz zu eckig spezielle Anbieter, die während der config-phase.

    [...] wenn der Winkel initialisiert oder bootstraps der Anwendung, Funktionen - controller, service etc,. sind auf der Modul-Instanz. Hier sind wir lazy loading werden die Komponenten und die Funktionen sind nicht verfügbar, zu einem späteren Zeitpunkt; daher müssen wir mit den verschiedenen provider-Funktionen und registrieren Sie diese Komponenten. Die Anbieter sind nur in der config Methode und somit haben wir zum speichern eines Verweises dieser Anbieter in der config-Funktion, wenn die Anwendung initialisiert wird.

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

    }
]);

    Nun in Ihrer loginController zum Beispiel schreiben Sie

    app.components.controller('loginController');

    definieren Sie Ihre neue Steuerung zu träge.

    Wenn Sie möchten, zu faulen-laden Sie Ihre Vorlagen empfehle ich die Nutzung der ui-router. Dort können Sie angeben, eine templateProvider die im Grunde eine Funktion zum laden von Vorlagen async

    • danke, ich finde auch, dass der Aufruf $gelten für viele Male, ist nicht korrekt. stackoverflow.com/questions/12729122/... vielleicht einmal pro jede route sollte ok sein, denke ich.
    • Ja, du hast wahrscheinlich Recht. Grundsätzlich müssen Sie sich entscheiden: muss ich warten, für jede Komponente laden vor dem Aufruf von $apply oder muss ich propagieren, das update so bald wie möglich.
    InformationsquelleAutor Johannes Ewald
  2. 2

    Dies ist ein Zitat aus
    https://github.com/webpack/webpack/issues/150

    webpack ist ein Modul bundler nicht eine javascript-loader. Es package-Dateien von der lokalen Festplatte und nicht das laden von Dateien aus dem Internet (außer Ihrer eigenen chunks).

    Verwenden Sie einen javascript-loader, ich. e. script.js

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