web-dev-qa-db-fra.com

Angularjs Uncaught Error: [$ injector: modulerr] lors de la migration vers la V1.3

Je suis en train d'apprendre Angular.js et je ne suis pas en mesure de comprendre ce qui ne va pas avec ce code simple. Il semble avoir l'air bien mais me donne l'erreur suivante.

**Error**: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

Et avant d’ajouter ng-app="app" (je le gardais simplement comme ng-app), il me donnait les erreurs suivantes. Pourquoi donc?

Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
    at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:19:510)
    at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:20:78)
    at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:75:331)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:57:65
    at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:408)
    at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:56:443)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:299)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:316)

<!doctype html>
    <html ng-app="app">
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

      </head>
      <body>
        <div ng-controller="Ctrl">
          <input ng-model="name">
          <h1>{{name}}</h1>
          <h2>{{age}}</h2>
        </div>

         <script>
          var Ctrl = function($scope)
           {
              $scope.age = 24;
           };
          </script>


      </body>
    </html>
javascriptangularjsangularjs-scopeangularjs-serviceangularjs-controller
13
Nakib

Après la désactivation de la déclaration de fonction de contrôleur global AngularJS version 1.3

Vous devez d'abord créer un module AngularJS, puis attacher tous les composants à ce module spécifique.

CODE

function Ctrl($scope) {
    $scope.age = 24;
}

angular.module('app', [])
    .controller('Ctrl', ['$scope', Ctrl]);

Spécifiquement pour votre cas, il y a un problème avec AngularJS 1.3.14 (rétrograder sur 1.3.13 fonctionne bien). Bien que je préfère que vous utilisiez angulaire 1.2.27 AngularJS 1.6.X, version plus stable et dernière version de AngularJS.

Working Plunkr

METTRE À JOUR:

Vous pouvez modifier l'état actuel du code en autorisant la déclaration du contrôleur global dans angular.config. Mais ce n'est pas la bonne façon de faire une application angulaire.

function Ctrl($scope) {
    $scope.age = 24;
}

angular.module('app', [])
    .config(['$controllerProvider',
        function ($controllerProvider) {
            $controllerProvider.allowGlobals();
        }
    ]);
15
Pankaj Parkar

Vous devez définir votre contrôleur

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

app.controller('Ctrl', ['$scope',function($scope) {
  $scope.age = 24;
}]);
6
Arielle Nguyen

Assurez-vous que ng-app="app_name" define doit correspondre à 

var app=angular.module('app_name',[])

<html ng-app="myApp">
<body>
  <div ng-controller="Ctrl">
      <input ng-model="name">
      <h1>{{name}}</h1>
      <h2>{{age}}</h2>
  </div>
  <script>
    var app = angular.module('myApp',[]); // same to the above define appName
    app.controller('Ctrl',function($scope){
      $scope.age=24; // initialize age by injecting scope
    });
  </script>
</body>
<html>

Pour plus de détails, visitez Ici

0
susan097