Problem with ng-controller : Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
I'm beginner in AngularJS, i'm facing a problem while using ng-controller :
this is my code :
<html>
<head>
<title></title>
</head>
<body ng-app>
<div ng-controller="ListDataCtrl">
<div ng-repeat="item in listData">
<p><strong>{{item.name | uppercase}}</strong></p>
<p>{{item.country}}</p>
<p>*********************</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script>
function ListDataCtrl($scope){
$scope.listData =[
{"name":"Achraf", "country":"Tunisia"},
{"name":"Maher", "country":"UAE"},
{"name":"Ahmed", "country":"USA"},
{"name":"Issam", "country":"France"}
];
}
</script>
</body>
</html>
the error message is : angular.js:15567 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=ListDataCtrl
The error indicated that controller is not registered:
The controller with the name 'ListDataCtrl' is not registered.
From AngularJS version 1.3 you have to register your controllers with modules rather than exposing them as globals:
documentation
First of all you need to declare an angularJS module for the app , and then register the controller to that module as below:
<body ng-app="myApp">
In script, app declaration:
var myApp = angular.module('myApp', []);
controller setup:
myApp.controller('ListDataCtrl', ['$scope', function($scope) {
...
}
Related
New to angular. Had it running fine with no controller then added a ng-controller directive to HTML markup and broke interpolation. Using Angular 1.6. What am I missing?
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"> </script>
</head>
<body>
<div ng-controller = "mainCtrl">
<p>Hello JS</p>
<p ng-if = "true">GM</p>
</div>
<script>
var module = angular.module("myapp" , []);
module.controller("mainCtrl", Main);
function Main(){
console.log("controller");
}
</script>
</body>
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
I'm learning AngularJS and I have a strange problem with it. My code is as follows:
html:
<!doctype html>
<html ng-app="blogApp">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="blogPostsCtrl">
<article ng-repeat="post in posts">
{{post.title}}
</article>
</div>
</body>
</html>
js:
var blogApp = angular.module('blogApp', ['ngSanitize', 'ngRoute']);
blogApp.controller('blogPostsCtrl', function($scope, $http) {
$http.get('//jsonplaceholder.typicode.com/posts').success(function(data) {
$scope.posts = data;
$scope.postsLoaded = 'visible-lg';
});
});
It should be working, as I create a module and then controller for it. But it returns an error: https://goo.gl/UWFMNm. What can I do?
Looks like you didn't install ngRoute. It comes separately in its own file/module.
As the error page says:
Using ngRoute
In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.
ngRoute Documentation - include the file from there for it to work
I am following the tutorial : AngularJS in 60 min and I am failed to get working a simple script where the controller is declared on the same page as the view (Indeed it is very basic).
But actually it is not working properly:
So my code is :
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>AngularJS in 60 minutes</title>
<script src="./js/angular.min.js" charset="utf-8"></script>
</head>
<body>
<div class="container" data-ng-controller="SimpleController">
<h3>Instance of model and data binding</h3>
Name : <input type="text" data-ng-model="city"> {{ city }}
<h3>Instance of repeat directives</h3>
<ul>
<ol data-ng-repeat="person in people | filter:city | orderBy:'city'">{{ person.firstname}} {{ person.name | uppercase}} : {{ person.city}}</ol>
</ul>
</div>
<script>
function SimpleController($scope) {
$scope.people = [{firstname:'Valerie', name:'lion', city:'Paris'}, {firstname:'Fred', name:'creche', city:'Marly'}, {firstname:'Laurent', name:'larher', city:'Massy'}];
}
</script>
</body>
and the result is in the image enclosed.
Any suggestions is welcome.
Fred
I suspect you are using Angular 1.3 or higher. As of 1.3, Angular no longer looks for controllers on window. Here is the migration link:
https://docs.angularjs.org/guide/migration
Instead, you should use the app.controller() syntax:
var myApp = angular.module('myApp',[]);
myApp.controller('SimpleController',function($scope) {
$scope.people = [{firstname:'Valerie', name:'lion', city:'Paris'}, {firstname:'Fred', name:'creche', city:'Marly'}, {firstname:'Laurent', name:'larher', city:'Massy'}];
});
And change your html:
<html data-ng-app="myApp">
In your script you must define angular module and then controller:
angular.module('myApp', []).controller('SimpleController', ['$scope', function($scope) {
// to do something....
}])
and in your HTML:
<html data-ng-app="myApp">
....
</html>
Since 1.3 you can't define your controller as a global function. You have to register in on a module. For this, you'll have to have a named module (data-ng-app='app'). Then, you'll be able to write
angular.module('app', []).controller("SimpleController", function($scope) { ...
I'm using Apache server to host an angular app.
This is the index.html:
<html>
<head>
<script src="/lib/angular/angular.js">
</head>
<script>
myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words">
{{word}}
</div>
</div>
</body>
</html>
When I hit the html from the browser, it shows a blank page with this error :
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.
What could be wrong?
The error is because of duplicate values inside array. I have added track by $index inside ng-repeat to resolve this issue.
DOCS: ng-repeat
Modified code:
<html>
<head>
<script src="/lib/angular/angular.js"></script>
</head>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words track by $index">
{{word}}
</div>
</div>
</body>
</html>
Please include angularjs in body.
<script src="/lib/angular/angular.js">
Include this line in body. Hope it will works!
Put the <script> part and the end of the body :
<body ng-app="myapp">
<div ng-controller="indexCtrl">
<div ng-repeat="word in words">
{{word}}
</div>
</div>
<script>
myapp = angular.module('myapp', []);
myapp.controller('indexCtrl', function($scope){
$scope.words = ['It','is','what','it','is']
});
</script>
</body>
that's a good practicte in HTML, and particularly in Angular to put the definition of your JS file just before the body ended