6

Sto lavorando su un tutorial angolare e sto avendo un problema all'inizio. Il caricamento del modulo myApp genera un errore. Come spiegato nel tutorial, questo dovrebbe essere uno dei tre modi per creare il controller.

Ecco schermata di stampa da esercitazione su cui sto lavorando: Creating controllers in tutorialsErrore non rilevato: il modulo 'myApp' non è disponibile! (AngularJS)

Quando ho refresh della pagina web ottengo questo errore nella console Chrome:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

Questo è il mio file HTML

<html ng-app="myApp"> 
     <head> 
     </head> 
     <body> 
      <h1>Hello world!</h1> 

      <div ng-controller="MainController"> 
       {{ 2+2 }} 
       <br> 
       {{ val }} 
      </div> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
      <script src="app.js"> 
     </body> 
    </html> 

Questo è il mio file app.js

var myApp = angular.module('myApp', []); 

var MainController = function($scope){ 
    $scope.val = "Main controller variable value" 
} 

Quindi qual è il mio problema? Non riesco a capirlo.

Grazie in anticipo

risposta

9

Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Il tuo problema originale è dovuto al tag script non valido. Fondamentalmente il tag script non è chiuso deve essere chiuso in modo che il browser possa scaricare il file app.js. I tag script non si chiudono automaticamente, quindi è necessario un tag di chiusura.

<script src="app.js"> 

dovrebbe essere

<script src="app.js"></script> 

Ora, una volta a correggere che si ottiene in un altro errore.

[ng:areq] Argument 'MainController' is not a function, got undefined

Dal momento che si sta utilizzando la versione più recente angolare, cioè niente> = 1.3.x ha bisogno il controller da registrare manualmente utilizzando il .controller costrutto. See here for more details.

Nota: è un po 'di confusione perché lo screenshot mostra l'utilizzo di 1.2.0 (che non richiede necessariamente la registrazione esplicita del controller) ma frammento nella domanda mostrata 1.4.x.

+2

Nice eyes .. +1 sir –

+0

hai ragione! Occhi davvero carini .. grazie! –

+2

:) grazie ragazzi .. – PSL

4

Si dovrebbe registrare un controller al modulo angolare myApp.

App.js

var myApp = angular.module('myApp', []); 
myApp.controller('MainController', MainController); 
var MainController = function($scope){ 
    $scope.val = "Main controller variable value" 
} 

Fondamentalmente quello che stavi facendo è corretto, ma che il codice è stato seguito dalla versione precedente di AngularJS, Il modo in cui hai dichiarato il controller non è altro che nota come controller come funzione , che deve abilitare il metodo allowGlobals() di $controllerProvider. Poiché il metodo Angular 1.3 + allowGlobals() è disabilitato aggiungendo il codice seguente, è possibile accenderlo per rendere operativo il codice, ma non è consigliabile farlo.

Config

myApp.config(['$controllerProvider', 
    function($controllerProvider) { 
    $controllerProvider.allowGlobals(); 
    } 
]); 

consultare stesso SO Answer qui

2

Prova questo:

myApp.controller ("MainController",[$scope, function ($scope){ 
     $scope.val = "Main controller variable value" 
}]); 

La direttiva ng-controller cerca il MainController nel modulo MyApp.

Problemi correlati