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";
});
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 trying to get AngularJS to run in my .jsp page with the simplest app copied directly from W3s example
UPDATE: I'm trying to use angular in a Liferay portlet, so here is the extent of my code in view.jsp
<%
/**
* Copyright (c) 2000-present Liferay, Inc. All rights reserved.
*/
%>
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script type='text/javascript'>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
However, as soon as I attempt to use my Controller + $scope object, the app breaks and I get the error
Failed to instantiate module myApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:40:134
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:391
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:43:246)
at Ac.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:19
I cannot figure out why this is. Any ideas?
For some reason, from your error, it looks like the code thinks you are trying to inject 'a'.
If possible, I recommend you put this in a separate script, and wrap in an IIFE:
app.js:
(function(){
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
})();
And then include it in your HTML:
<script src="app.js"></script>
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>
I am trying to create a Hello World page in angular.js.But it displays: {{helloMessage}} instead of Hello World. Could not understand, where is the problem.
The folder contains two files: angular.min.js and HelloWorld.html. I wrote following code in HelloWorld.html:
<!doctype html>
<html lang = "en" ng-app>
<head>
<meta charset = "utf-8">
<title> Hello World </title>
</head>
<body>
<h1 ng-controller = "HelloWorldCtrl">{{helloMessage}}</h1>
<script src = "angular.min.js"></script>
<script type = "text/javascript">
function HelloWorldCtrl($scope){
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
Your controller is not set up correctly. It needs to be bound to your angular app. First you need to name the app:
<html ng-app='myApp'>
Then change your script like so:
angular.module('myApp', []).controller('HelloWorldCtrl',
function($scope) {
$scope.helloMessage = "Hello World";
}
);
Refer to the docs: https://docs.angularjs.org/api/ng/directive/ngApp
You're simply creating a function HelloWorldCtrl, but not assigning it to a controller. Check the documentation.
You should do it like this:
var myApp = angular.module('myApp',[]);
myApp.controller('HelloWorldCtrl', ['$scope', function($scope) {
$scope.greeting = "Hello World";
}]);
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/