En utilisant angularJS avec requireJS, impossible de lire la propriété 'module' undefined

J'avais commencé à écrire une application en utilisant angularJS. Après quelques semaines, j'ai soudain réalisé que je devrais avoir utilisé exiger JS depuis le début de charger mes modules. Oui, je sais, c'est stupide. Mais elle est ce qu'elle est.
J'ai donc essayé de convertir mon code en fonction de requireJS maintenant.

C'est mon main.js

requirejs.config({
baseUrl: "js",
paths: {
    jquery:'jquery-1.7.min',
    angular: 'angular',
    angularRoute:'angular-route',
    mainApp:'AngularApp/app'

},
 priority:['angular'],
shim:{

    angularRoute:{
        deps:["angular"]
    },
    mainApp:{
        deps:['angularRoute']
    }
}});

require(['angular','angularRoute', 'mainApp'],
    function(angular, angularRoute, app)
    {
        angular.bootstrap(document, ['ServiceContractModule']);
    });

C'est mon app.js

define(['angular',
    'angularRoute',
    'AngularApp/services',
    'AngularApp/directives',
    'AngularApp/controllers'],
    function(angular, angularRoute, services, directives, controllers)
    {
        console.log("sup");
        var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]);
        serviceContractModule.config(function($routeProvider,$locationProvider) {
            $routeProvider.when('/contractNumber/:contractNumbers', {
                controller : 'ContractController',
                templateUrl : './contractSearchResult',
                reloadOnSearch : true
            }).when('/serialNumber/:serialNumbers', {
                controller : 'SerialController',
                templateUrl : './serialSearchResult'
            }).when('/QuoteManager',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerView'
            }).when('/QuoteManagerHome',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerHome'
            });
        });

        return serviceContractModule;
    });

C'est mon directives.js fichier

define(['angular',
    'AngularApp/Directives/tableOperations',
    'AngularApp/Directives/line',
    'AngularApp/Directives/listOfValues'],
    function(
    angular,
    tableOperations,
    line,
    listOfValues)
    {
        var directiveModule = angular.module('ServiceContractModule.directives');
        directiveModule.directive('tableoperations', tableOperations);
        directiveModule.directive('line', line);
        directiveModule.directive('listOfValues', listOfValues);
        return directiveModule;
    }

)

Et c'est mon services.js fichier

define(['angular',
    'AngularApp/Services/quoteManagerSearch'],
    function(angular, quoteManagerSearch)
    {
        var serviceModule = angular.module('ServiceContractModule.services');
        serviceModule.factory('searchRequestHandler', quoteManagerSearch);
        return serviceModule;
    }

)

Quand je lance ma page, le courant d'erreur que j'obtiens est

Uncaught TypeError: Cannot read property 'module' undefined directives.js:14

Uncaught TypeError: Cannot read property 'module' undefined services.js:5

Cela semble être le cas sur cette ligne en particulier

var directiveModule = angular.module('ServiceContractModule.directives');

Je pense que pour une raison quelconque, l'angle de fichier n'est pas chargé. Bien que quand je lance la page, je peux voir tous les js fichiers chargés dans le bon ordre dans google chrome.

Toutes les idées, les gars? Besoin d'une aide rapide! Merci!

Changement angulaire de $angulaire
Umm, mais je l'ai défini l'alias pour le module angulaire comme "angulaire" lui-même. Pourquoi aurais-je besoin de le faire?
avez-vous appeler la référence angulaire de script?
Oui. Dans le main.js, j'ai spécifié dans les chemins, angulaire: angulaire'. Le chemin d'accès pour l'angle de fichier est js/angular.js. J'ai spécifié le baseurl que js. De plus, lorsque je charge la page, je peux effectivement voir la angular.js fichier en cours de chargement après le main.js.

OriginalL'auteur Kaushik Lakshmikanth | 2014-02-26

6

En regardant les sources Angulaire, je ne vois nulle part qu'il appelle RequireJS' define si vous avez besoin d'une cale d'épaisseur. Ajoutez ceci à votre shim configuration:
```
angular: {
    exports: "angular"
}
```
Par le chemin, la priority champ dans votre configuration est obsolète. Soit vous utilisez RequireJS 2.x qui ignore ce domaine, car priority est pris en charge uniquement par RequireJS 1.x. Ou vous utilisez RequireJS 1.x qui aurait l'honneur priority mais serait ignorer le shim champ car shim a été introduit dans les 2.x. Ma suggestion: utiliser RequireJS 2.x et supprimer priority.

Hey, merci beaucoup. Qui fait beaucoup de sens. J'ai enlevé la priorité et ajouté les exportations de biens angulaire. Maintenant j'ai l'impression d'être une erreur de dépassement de délai pour angularRoute et mainApp. AngularRoute ne semble pas à la charge après l'angle de fichier. Est-il un problème avec mon dépendances?
Il n'y a rien qui saute à moi de ce que je peux voir dans votre question. Lorsque vous vérifiez le réseau des demandes de votre navigateur, est-il télécharger les bons trucs pour angularRoute et mainApp?
Nope. Il charge main.js puis angular.js et s'arrête. J'ai également ajouté les exportations de biens de la angularRoute. De toute façon, j'ai essayé avec et sans. Même erreur deux fois.
Si le module dont vous avez la charge à mainApp est le même module que vous consultez avec "C'est ma app.js", alors vous n'avez pas besoin d'un shim de configuration pour elle parce que vous utilisez define de le définir. Ce qui pourrait expliquer certains des problèmes que vous rencontrez.
Ouais je l'ai fait. Mais quelque chose de bizarre s'est passé. App.js semble de charge avant angulaire. C'est vraiment bizarre, comme je l'ai mentionné dans mon définir la balise app.js. Et le même problème persiste pour angularRoute. N'a tout simplement pas de charge. Tous les autres modules semblent charge. C'est une drôle de comportement. Peut-être quelques autres fichiers sont importés quelque part et d'autre à l'origine de certains problèmes.

OriginalL'auteur Louis

Il y a 2 problèmes avec votre installation:

1. Vous êtes d'amorçage angulaire dans votre main.js puis charger les dépendances.

2. Vous devez faire référence à la dépendance de l'aide de la chaîne

Donc, après le retrait de la angular.bootstrap de votre main.js, essayez les solutions suivantes:

app.js

define([
    'AngularApp/services',
    'AngularApp/directives',
    'AngularApp/controllers'],
    function()
    {
        console.log("sup");
        var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', 'ServiceContractModule.services', 'ServiceContractModule.directives', '<<Your Controller Module Name>>' ]);
        serviceContractModule.config(function($routeProvider,$locationProvider) {
            $routeProvider.when('/contractNumber/:contractNumbers', {
                controller : 'ContractController',
                templateUrl : './contractSearchResult',
                reloadOnSearch : true
            }).when('/serialNumber/:serialNumbers', {
                controller : 'SerialController',
                templateUrl : './serialSearchResult'
            }).when('/QuoteManager',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerView'
            }).when('/QuoteManagerHome',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerHome'
            });
        });

        angular.bootstrap(document, ['ServiceContractModule']);
    });

Découvrez angularAMD que j'ai créé pour aider à l'utilisation de RequireJS et AngularJS:
http://marcoslin.github.io/angularAMD/

OriginalL'auteur marcoseu

Vous devez vous connecter pour publier un commentaire.