AngularJS, requireJS und ngRoute

Baue ich ein Adressbuch, um zu erfahren, Winkel-und haben es wunderbar funktioniert bis ich versuche, die route manager. Das Problem mit dem laden der Winkel-route-manager über benötigen. Ich bin immer folgende Fehlermeldung "Uncaught object".

Es wurden Fragen zu diesem, aber Sie entfernt wurden, durch den Benutzer, und andere Antworten zeigen auf nicht mit im Lieferumfang enthalten das ngRoute Abhängigkeit in der ng.Modul-Abhängigkeit-Liste, oder nicht verlangen, überhaupt. Ich bin nicht mit viel Glück eine Antwort zu finden!

Ich habe die eine HTML-Datei mit einer require config-Datei:

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 namens am Ende der config-Datei:

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


});

Den auskommentierten Abschnitt ist der Teil, den ich versuche zu herauszufinden. Die obige version funktioniert, aber wenn ich versuche, um das ngRoute Zusammenhang mit der ng.Modul-Aufruf in den auskommentierten Teil bekomme ich die genannten Fehler.

Kann ich sehen, dass alle Elemente geladen wurden, bevor das Modul aufgerufen wird. Aber ich kann auch sehen, dass das ngRoute-Protokolle als undefiniert, so macht es Sinn, dass es nicht funktioniert! Ich habe versucht eine Reihe von verschiedenen config-Varianten. Mag auch die angular-route als eine Abhängigkeit von Winkel (die den gleichen Fehler ein weiteres plus von " Uncaught TypeError: Cannot read property 'Modul' undefined').

Kann ich sehen, dass es eine seed-app, die verwendet benutzerdefinierte async-loader statt fordern... was empfehlen Sie?

Ich weiß nicht, wie zu Debuggen dieses Problems, jede Hilfe oder Hinweise dankbar!

  • Ich weiß nicht viel über RequireJS, aber ich bin ziemlich sicher, eckig.Modul erwartet ein array von strings als seine Abhängigkeiten, z.B. ng.module('contactsApp', ['ngRoute']);
  • Vielen Dank - hab ich korrigiert... aber die gleichen Fehler, wie ich glaube nicht, dass das Modul im Umfang.
  • Hmm, das ist merkwürdig. Es laden soll, das ngRoute-Modul auf die gleiche Weise wie Lasten, Winkel, zumindest, so würde man denken.
  • Vielleicht werfen Sie einen Blick auf github.com/tnajdek/angular-requirejs-seed und sehen, was Sie anders machen?
  • Es ist nicht so einfach zu verwenden, AngularJS und RequireJS. Schauen Sie sich meine Antwort an stackoverflow.com/questions/23929498/...
InformationsquelleAutor GetafixIT | 2014-06-13
  1. 6

    Also nahm ich ivarni Beratung und überprüfte die Unterschiede zwischen meinem Beispiel und der github.com/tnajdek/angular-requirejs-seed repo.

    Eigentlich war es nicht zu weit Weg ist und das Haupt-Problem war mit dem bootstrap-rufen. Wenn Sie verwenden, benötigen Sie das bootstrap-effektiv feuert, bevor die assets geladen haben. Die Verwirrung kommt, weil wenn man sich in der Registerkarte Netzwerk, es scheint, dass die Vermögenswerte wurden geladen erfordern. Jedoch, Winkel hatte bereits ausgeführt das bootstrap-ohne zusätzliche Vermögenswerte. Siehe: https://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap für mehr info auf das, was der bootstrap muss bei der Verwendung von Winkel-mit verlangen.

    Mein verlangen config-Datei sieht nun folgendermaßen aus: 

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

    Diese Arbeit zu machen ich hatte auch die Rückkehr der im Lieferumfang enthalten-Modul, so dass ich nennen könnte, die es als Modul mit Abhängigkeiten in dem snippet oben. Also mein ContactsMod.js sieht jetzt 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, dies ist nützlich, um jemanden,... Danke für Eure Hilfe Leute!

    • Hallo, ich bin vor dem problem n versucht, Ihre Lösung kann aber nicht verstehen, dass einige Teile des Codes. eckig.resumeBootstrap([contactsMod.name]); // was ist contactsMod.name Wert hier? && return angular.Modul('contactsMod', [ 'ngRoute', Controller.name]); // was ist Controllern.name Wert hier?
    • Hallo Rama, " contactsMod.name' ist ein Verweis auf den Namen eines Moduls in ein container-Objekt enthält eine Reihe von Modulen,... so 'Module/contactsMod' ist das Modul mit einer Referenz von 'contactsMod'. In der gleichen Weise 'Controller/contactsCtrl' ist verwiesen als 'Controller' so-Controller.name ist der name des Controllers übergeben werden, um die contactsMod Modul. Hoffe das macht Sinn!
    InformationsquelleAutor GetafixIT
  2. 3

    Brauchen Sie nicht exportieren 'ngRoute' in: 

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

    Und Sie verpassen ", wenn Sie Spritzen ngRoute, 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']);


});
    • Hallo... vielen Dank für Ihre Antwort. Ich habe versucht, deine Vorschläge, aber noch keine Freude. Ich glaube nicht, dass die Definition der Steuerung innerhalb des config-block am Ende gibt es rechts, wie es definiert in der $routeProvider. Auch durch die bootstrap-es bedeutet, dass die app nicht das Feuer überhaupt. Wenn ich kommentieren 'contactsApp.controller ();' und bewegen Sie den bootstrap-out. Ich bekomme immer noch den gleichen Fehler. Ich habe die entfernt das ngRoute-export und fügte hinzu: "aber derselbe Fehler.
    • In meinem Fall brauche ich nur um die Beurteilung der deps Teil der shim von der Bibliothek abhängig ist gewinkelt, um das Problem zu fixen.
    InformationsquelleAutor user3737521
Schreibe einen Kommentar