AngularJS, requireJS und ngRoute

Question

Ich baue ein Adressbuch, um eckig zu lernen und es funktioniert gut, bis ich versuche, den Routenmanager zu verwenden. Das Problem besteht darin, den eckigen Routenmanager über require zu laden. Ich erhalte den folgenden Fehler 'Uncaught object'.

Es gab Fragen dazu, aber sie wurden vom Benutzer entfernt, und andere Antworten deuten darauf hin, dass die ngRoute-Abhängigkeit in der ng.module-Abhängigkeitsliste nicht enthalten ist oder gar nicht benötigt wird. Ich habe nicht viel Glück, eine Antwort zu finden!

Ich habe das eine HTML-Datei, die eine Datei benötigt Config beinhaltet:

requirejs.config({ 
    paths: { 
    'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min'], 
    'angular': ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min','angular_1.2.16.min'], 
    'angular-route': ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min','angular-route_1.2.16.min'], 
    }, 
    shim: { 
    'jquery': { 
     exports: 'jquery' 
    }, 
    'angular': { 
     exports: 'angular' 
    }, 
    'angular-route': { 
     exports: 'ngRoute', 
     deps: ['angular'] 
    } 
    }, 
    baseUrl: 'js/lib' 
}) 

require(['modules/ContactsMod'], function() { }); 

und dies ist die ContactsMod.js Datei am Ende der Konfigurationsdatei mit dem Namen:

define(['jquery', 'angular-route','angular','controllers/ContactsCtrl','routes/ContactsRout'],function($,ngRoute,ng,controller,router) { 

// var contactsApp = ng.module('contactsApp', [ngRoute]); 

// contactsApp.config(function ($routeProvider, $locationProvider){ 
// $log.debug("Configuring $routeProvider..."); 
// 
// $locationProvider.html5Mode(true); //????? 
// 
// $routeProvider 
//  .when('/', { 
//  templateUrl : "views/Contacts.html", 
//  controller : "controller" 
//  }) 
//  .otherwise({ redirectTo: '/' }) 
// }) 

    var contactsApp = ng.module('contactsApp', []); 
    contactsApp.controller(controller); 
    ng.bootstrap(document, ['contactsApp']); 


}); 

kommentierte out Abschnitt ist der Teil, den ich versuche herauszufinden. Die obige Version funktioniert, aber wenn ich versuche, die ngRoute-Abhängigkeit zum ng.module-Aufruf im auskommentierten Teil hinzuzufügen, bekomme ich den Fehler erwähnt.

Ich kann sehen, dass alle Assets geladen wurden, bevor das Modul aufgerufen wird. Aber ich kann auch sehen, dass die ngRoute sich als undefiniert ausgibt, also macht es Sinn, dass es nicht funktioniert! Ich habe verschiedene Konfigurationsvarianten ausprobiert. Wie die Einbeziehung der Winkelroute als Winkelabhängigkeit (die den gleichen Fehler plus einen anderen von 'Uncaught TypeError: Eigenschaft' Modul 'von' undefined 'nicht lesen kann).

Ich kann sehen, es gibt eine Seed-App, die benutzerdefinierte Async-Lader anstelle von benötigt ... Was empfehlen Sie?

Ich weiß nicht, wie dieses Problem zu debuggen, jede Hilfe oder Zeiger geschätzt!

Answer 1

Sie brauchen nicht exportieren 'ngRoute' in:

'angular-route': { 
     deps: ['angular'] 
    } 

Und Sie vermissen '', wenn Sie ngRoute injizieren, versuchen Sie dies:

define(['angular','jquery', 'angular-route','controllers/ContactsCtrl','routes/ContactsRout'],function(ng) { 

var contactsApp = ng.module('contactsApp', ['ngRoute']); 

contactsApp.config(function ($routeProvider, $locationProvider){ 
    $log.debug("Configuring $routeProvider..."); 

    $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
     templateUrl : "views/Contacts.html", 
     controller : "controller" 
     }) 
     .otherwise({ redirectTo: '/' }) 

    contactsApp.controller(controller); 
    ng.bootstrap(document, ['contactsApp']); 


}); 

Answer 2

Also nahm ich ivarni Rat und ausgecheckt die Unterschiede zwischen meinem Beispiel und dem github.com/tnajdek/angular-requirejs-seepo.

Eigentlich war es nicht so weit weg und das Hauptproblem war mit dem Bootstrap-Aufruf zu tun. Wenn Sie "require" verwenden, wird der Bootstrap effektiv ausgelöst, bevor die Assets geladen wurden. Die Verwirrung kommt, weil, wenn Sie in der Netzwerkregisterkarte schauen, es scheint, dass die Assets von require geladen wurden. Angular hatte den Bootstrap jedoch bereits ohne die zusätzlichen Assets ausgeführt. Bitte sehen Sie: https://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap für weitere Informationen darüber, was der Bootstrap tun muss, wenn Sie angular mit require verwenden.

Mein benötigen Konfigurationsdatei sieht nun wie:

require.config({ 
    baseUrl: 'js', 
    paths: { 
     jquery: ['//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min', 'lib/jquery/jquery_2.0.0.min.js'], 
     angular: ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min', 'lib/angular/angular_1.2.16.min'], 
     angularRoute: ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min', 'lib/angular-route/angular-route_1.2.16.min'] 
    }, 
    shim: { 
     'angular' : {'exports' : 'angular'}, 
     'angularRoute': ['angular'], 
    } 
}); 

window.name = "NG_DEFER_BOOTSTRAP!"; 

require(['angular', 'modules/contactsMod', 'routes/contactsRoutes'], function(angular, contactsMod, routes) { 
    'use strict'; 

    var $html = angular.element(document.getElementsByTagName('html')[0]); 

    angular.element().ready(function() { 
     angular.resumeBootstrap([contactsMod.name]); 
    }); 
}); 

Um diese Arbeit zu machen, musste ich auch das mitgelieferte Modul zurückkehren, damit ich es als Modul mit Abhängigkeiten im Snippet oben nennen könnte. Also meine ContactsMod.js sieht nun wie folgt aus:

define(['angular', 'controllers/contactsCtrl', 'angularRoute'], function (angular, controllers) { 
    'use strict'; 

    // Declare app level module which depends on filters, and services 
    return angular.module('contactsMod', [ 'ngRoute', controllers.name]); 
}); 

Ich hoffe, das jemand nützlich ist ... Vielen Dank für Ihre Hilfe Leute!