This question already has answers here:
Controller not a function, got undefined, while defining controllers globally
(14 answers)
Closed 8 years ago.
I'm learning AngularJS and have come across this error while implementing a controller.
Can someone point out what's wrong? (followed this exactly as it's shown in a tutorial unless some of the functions are deprecated?)
I get the following error:
Argument 'Ctrl' is not a function, got undefined
HTML
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"> </script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="name">
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
var Ctrl = function($scope) {
$scope.name = "Noob";
$scope.age = "21";
};
</script>
As I know you need to define controller using module.controller method. For example, name your app as myApp
<html ng-app="myApp">
and the js part will be:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.name = "Noob";
$scope.age = "21";
}]);
You need to define your app
var myApp = angular.module('myApp',[]);
and pass $scope into your controller
var Ctrl = function($scope) {
Here's a fiddle link with those changes: http://jsfiddle.net/fxk7mtb7/
Related
Hi Im trying to write an angular app from scratch. (New to it) Keep getting an error that secondController is not registered. Why?
These are my three files and for some reason it keeps saying "The controller with the name 'secondController' is not registered."
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./angular.js"></script>
<script src="./secondModule.js"></script>
<script src="./app.js"></script>
</head>
<body>
<div ng-controller="appController">
<p>App text : {{myAppText}}</p>
<p>secondControllerModule: {{ secondControllerText }}</p>
</div>
<div ng-controller="secondController">
Second Module : {{secondControllerText}}
</div>
</body>
</html>
app.js
angular.module("myApp", [])
.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text"
}])
secondModule.js
angular.module("myApp", [])
.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text"
}])
I think as per your code you should take three files
1. Declare angular module in module.js file
var app = angular.module("myApp", []);
Add the first controller appController.js
app.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text";
}]);
Add second controller file secondController.js
app.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text";
}]);
now put them in this heirarchy
- Add ref of Angular JS
then
1 module.js
2 appController.js
3 secondController.js
First of all, I would like to clarify that this is incorrect:
<div ng-controller="appController">
<p>App text : {{myAppText}}</p>
<p>secondControllerModule: {{ secondControllerText }}</p>// Defined in the wrong ng-controller,
so move it to the correct one.
</div>
The reason you are getting that error is that you're defining the app module twice in your js files. It's rather simple, all you need to do is take off the second parameter in your secondModule.js
angular.module("myApp")// Needs to be like this
.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text"
}])
Then in your app.js file
angular.module("myApp", [])
.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text"
}])
Then in your HTML file, you need to fix the order of the script
<script src="./angular.js"></script>
<script src="./app.js"></script> // App module must be first because the module is defined here
<script src="./secondModule.js"></script>
I am new to AngularJS. I am trying to use ng-include but it does not show the html files which I refered.
app.js code
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, function($scope)
{
$scope.templateID = 'testing1.html';
$scope.changeTemplateID = function($scope){
$scope.templateID = 'testing2.html';
}
}]);
index.html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<ng-include src="templateID"></ng-include>
<h1>Hello Plunker!</h1>
<p ng-click="changeTemplateID()">next</p>
</body>
</html>
There are two html file in the root directory. They are called testing1.html and testing2.html. I even tried to refer them directly like "'testing1.html'" in the ng-include.
but no success. Any help?
Two errors in your JS code:
var app = angular.module('myApp', []);
// vvvvvvvv must be a string
app.controller('mainCtrl', ['$scope', function($scope)
{
$scope.templateID = 'testing1.html';
// you don't need to pass $scope here:
$scope.changeTemplateID = function(){
$scope.templateID = 'testing2.html';
}
}]);
Plunker for your perusal.
app.controller('mainCtrl', [$scope, function($scope)...
Your [$scope must be ['$scope' like a string, change it and you'll be fine )
I am using AngularJS configured in STS (Eclipse). How we can fixed this error?
Cannot find controller with name NameCtrl.
HTML
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>AJ Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js" ></script>
<script>
function NameCtrl($scope){
$scope.firstName = 'John';
$scope.lastName = 'Smith';
}
</script>
</head>
<body ng-controller="NameCtrl">
First name:<input ng-model="firstName" type="text"/>
<br>
Last name:<input ng-model="lastName" type="text"/>
<br>
Hello {{firstName}} {{lastName}}
</body>
</html>
From angular vs1.3.x you have to bind controller with module in order to use.
Like this
angular
.module("app",[])
.controller("NameCtrl",function($scope){
$scope.firstName = 'John';
$scope.lastName = 'Smith';
})
Add module name in html
<html ng-app="app">
JSFIDDLE
1.You need to define an angular app first (named'myApp' here).
2.Define an angular module inside that app.
3.Define a controller inside that module.
4.Bind that module to your controller, and your controller to angulaJS app.
var app = angular.module("myApp", []);
app.controller("NameCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Smith";
});
This question already has answers here:
Controller not a function, got undefined, while defining controllers globally
(14 answers)
Getting an error when using ng-controller in angularjs ver 1.3.0 [duplicate]
(1 answer)
Closed 7 years ago.
I am a newbie to angular js and found a strange problem.I was not able to run the following code :
hello.html
<html ng-app>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Angular 1.3+ no longer supports controller declaration on the global scope. Modify your code as
angular.module('app', [])
.controller('HelloController', function ($scope) {
$scope.greeting = {
text: 'hello'
}
});
You need to create a module for your controller, for example :
angular.module('myApp.controllers')
.controller('HelloController', function ($scope) {
$scope.greeting = { text: 'Hello' };
}
});
Searched far and wide, most of the answers were "you forgot to include your controller".
"Error: [ng:areq] Argument 'AdamState' is not a function, got undefined"
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="">
<div ng-controller="AdamState">
</div>
</body>
</html>
JS:
function AdamState($scope, $http) {
$scope.test = 1;
}
Also, when calling that function from the console it will be called.
Angular 1.3+ global controller functions are turned off.
So you need to bind your controller to module,
Controller
var app = angular.module('app',[])
app.controller('AdamState',[`$scope`, `$http`, AdamState])
function AdamState($scope, $http) {
$scope.test = 1;
}
Or you need to declare controller as global controller then do allow global controller function manually form app.config() that is in angular config phase, the below code will make your code working.
CODE
app.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Thanks.
You miss lots of code there, this should eventually help you get started:
var myApp = angular.module("myApp", []);
myApp.controller("AdamStateCtrl", function($scope) {
$scope.test = 1;
});
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="AdamStateCtrl">
{{test}}
</div>
</body>
</html>