Angularjs Uncaught Error: [$injector:modulerr] whe

2018-12-31 12:06发布

站内问答 / JavaScript
1261 4 6

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>

4条回答
高级女魔头
2楼-- · 2018-12-31 12:40

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>

查看更多
0人赞 添加讨论(0) 举报
美炸的是我
3楼-- · 2018-12-31 12:47

You have to define your controller

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

app.controller('Ctrl', ['$scope',function($scope) {
  $scope.age = 24;
}]);
查看更多
0人赞 添加讨论(0) 举报
与风俱净
4楼-- · 2018-12-31 12:49

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();
        }
    ]);
查看更多
0人赞 添加讨论(0) 举报
素衣白纱
5楼-- · 2018-12-31 12:58

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)