Menu
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>
215
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();
}
]);
I was myself stuck in this issue for sometime. Check for following in order:-
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).
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
Next register your controller with the app and pass in all necessary injections
app.controller('myCtrl',function(){});
Call your javascript file in your html file
<script src="app.js"></script>
26
You have to define your controller
var app = angular.module('app', []);
app.controller('Ctrl', ['$scope',function($scope) {
$scope.age = 24;
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
