Login/Register
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
Asked Answered
Solved javascriptangularjsangularjs-scopeangularjs-serviceangularjs-controller
L

5

15

I am learning Angular.js and I am not able to figure out whats wrong with this simple code. It seems to look fine but giving me following error.

**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)

And before adding ng-app="app" (I was just keeping it as ng-app) it was giving me following errors. Why is that?

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>
Lorineloriner answered 25/2, 2015 at 19:29 Comment(0)
L
15

After AngularJS version 1.3 global controller function declaration is disabled

You need to first create an AngularJS module & then attach all the components to that specific module.

CODE

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

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

Specifically for your case, there is some issue with AngularJS 1.3.14 (downgrade it to 1.3.13 works fine). Though I'd prefer you to use angular 1.2.27 AngularJS 1.6.X, Which is more stable version & latest release of AngularJS.

Working Plunkr

UPDATE:

You could do your current code to working state by allow global controller declaration inside angular.config. But this isn't the correct way to run angular application.

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

angular.module('app', [])
    .config(['$controllerProvider',
        function ($controllerProvider) {
            $controllerProvider.allowGlobals();
        }
    ]);
Lithophyte answered 25/2, 2015 at 19:54 Comment(0)
A
7

I was myself stuck in this issue for sometime. Check for following in order:-

  1. The path to you angular.js script is correct (whether you are calling it in your HTML from a local source or as an external resource).

  2. Next, once your angular.js is correct check if your app is initialized or not.

    var app=angular.module('app',[])//in your app.js file

    <body ng-app="app">//in your html

  3. Next register your controller with the app and pass in all necessary injections

    app.controller('myCtrl',function(){});

  4. Call your javascript file in your html file

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

Allround answered 18/1, 2016 at 21:5 Comment(0)
H
6

You have to define your controller

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

app.controller('Ctrl', ['$scope',function($scope) {
  $scope.age = 24;
}]);
Horseflesh answered 25/2, 2015 at 19:34 Comment(1)
are you getting the same error even after adding ng-app="app"? – Horseflesh
V
0

Be Sure that ng-app="app_name" define must match to

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>

For more details visit Here

Vicentevicepresident answered 15/7, 2018 at 7:59 Comment(0)
S
0
  1. Check the version of angularjs in your html file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
  1. Call your javascript file in your HTML file
<script src="app.js"></script>
Severn answered 13/12, 2020 at 17:39 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.