AngularJS, requireJS e ngRoute

Question

Sto costruendo una Rubrica per imparare l'angolazione e farlo funzionare bene fino a quando non cerco di utilizzare il gestore del percorso. Il problema è con il caricamento del gestore di rotta angolare tramite richiesta. Ricevo il seguente errore "Oggetto non catturato".

Ci sono state domande a riguardo ma sono state rimosse dall'utente, e altre risposte indicano di non aver incluso la dipendenza ngRoute nell'elenco delle dipendenze ng.module, o che non stanno utilizzando affatto. Non ho molta fortuna a trovare una risposta!

ho il file di HTML che include un file di configurazione richiede:

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() { }); 

e questo è il file ContactsMod.js chiamato alla fine del file di configurazione:

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']); 


}); 

Il commentato la sezione fuori è la parte che sto cercando di capire. La versione sopra funziona, ma quando provo ad aggiungere la dipendenza ngRoute alla chiamata ng.module nella parte commentata, ottengo l'errore menzionato.

Posso vedere che tutte le risorse sono state caricate prima che il modulo venga chiamato. Ma posso anche vedere che ngRoute si disconnette come non definito quindi ha senso che non funzioni! Ho provato un certo numero di diverse varianti di configurazione. Come includere la rotta angolare come dipendenza angolare (che fornisce lo stesso errore più un altro di "Uncaught TypeError: Impossibile leggere la proprietà" modulo "di indefinito").

Riesco a vedere che c'è un'app di semi che utilizza un caricatore asincrono personalizzato invece di richiedere ... cosa consiglia?

Non so come eseguire il debug di questo problema, qualsiasi aiuto o indicazioni apprezzate!

Answer 1

Non è necessario esportare 'ngRoute' in:

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

E si dimentica '' quando si inietta ngRoute, provate questo:

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

Allora presi il consiglio di ivarni e controllato le differenze tra il mio esempio e il repository github.com/tnajdek/angular-requirejs-seed.

In realtà non era poi così lontano e il problema principale riguardava la chiamata bootstrap. Quando usi, il bootstrap viene effettivamente attivato prima che le risorse siano state caricate. La confusione deriva dal fatto che se si guarda nella scheda di rete, sembra che le risorse siano state caricate su richiesta. Tuttavia, Angular aveva già eseguito il bootstrap senza le risorse aggiuntive. Si prega di vedere: https://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap per maggiori informazioni su ciò che il bootstrap deve fare quando si usa angolare con require.

il mio file di configurazione richiede ora assomiglia:

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

Per fare questo lavoro ho dovuto anche restituire il modulo incluso in modo che potessi chiamare come un modulo con dipendenze nel frammento di codice. Così i miei ContactsMod.js appare come segue:

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

Spero che questo sia utile a qualcuno ... Grazie per il vostro aiuto gente!