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>
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>
<!DOCTYPE HTML>
<html lang="en-US" ng-app="theapp">
<head>
<meta charset="UTF-8">
<title>asd</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var mainScope;
angular.module('theapp', []).controller('MainCtrl', function($scope, $injector) {
$scope.demo = "test123";
$scope.scopecomp = function(){
angular.element(document).injector().invoke(function ($compile) {
$compile(document.body)($scope);
});
}
mainScope = $scope;
});
function addDiv(){
var $newDiv = $('<div>{{demo}}</div>');
$(document.body).append($newDiv);
}
function comp(){
mainScope.comp();
}
</script>
</head>
<body ng-controller="MainCtrl" ng-change="comp();">
<h1>{{demo}}</h1>
<input type="text" id="compText" />
<button onclick="addDiv();">add</button>
<button ng-click="scopecomp();">compile with ng-click (works fine)</button>
<button onclick="comp();">compile with onlick (not working)</button>
</body>
</html>
I want to run the comp() function anywhere in my project. I tried button onclick,it didn't work but ng-click works fine. What is the problem ? Why onclick doesn't work ?
New : changeContent function added.
<!DOCTYPE HTML>
<html lang="en-US" ng-app="theapp">
<head ng-controller="MainCtrl as main">
<meta charset="UTF-8">
<title>asd</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
angular.module("theapp", []).controller("MainCtrl", MainController);
MainController.$injector = ['$timeout'];
var vm;
function MainController($timeout) {
vm = this;
vm.post = null;
function loadStuff(){
$timeout(function() {
vm.post = {
title: "Post Title",
content: "Post Content"
};
}, 1000);
}
loadStuff();
}
function changeContent(){
vm.post.content = "<div>new content </div>";
}
</script>
</head>
<body ng-controller="MainCtrl as main">
<p ng-hide="main.post">Loading...</p>
<h3>{{main.post.title}}</h3>
<p>{{main.post.content}}</p>
<button onclick="changeContent();">change</button>
</body>
</html>
New bodyController()
function bodyController($scope, $injector) {
_bodyController = this;
$scope.title = "ttt";
$scope.content = "aaa";
$scope.comp = function(){
angular.element(document).injector().invoke(function ($compile) {
$compile(document.body)($scope);
});
}
myAPP.Run(function(){
$scope.title = globalOBJ.title;
$scope.content = globalOBJ.content;
$scope.comp();
});
}
You should change your '' to this:
<body ng-controller="MainCtrl" ng-model="demo" ng-change="comp();">
If you check the url from the first line of the error log: https://docs.angularjs.org/error/$compile/ctreq?p0=ngModel&p1=ngChange. The problem is explained:
Controller 'ngModel', required by directive 'ngChange', can't be
found! Description This error occurs when HTML compiler tries to
process a directive that specifies the require option in a directive
definition, but the required directive controller is not present on
the current DOM element (or its ancestor element, if ^ was specified).
To resolve this error ensure that there is no typo in the required
controller name and that the required directive controller is present
on the current element.
The directive 'ng-change' require a 'ng-model' to work properly, that is why you are getting an compile error.
Now your second question, "Why onclick doesn't work ?". You should never manipulate the DOM from the controller, if you have to do that use a directive. When you call "scopecomp()" from the ng-click that method is invoked from "within" the angular engine, it will fire an digest cycle which will process the "html" (it's more than that, I'm trying to keep it simple) and print what you expect, but when you add "{{demo}}" directly to the DOM, that variable will not be processed.
There is no need to change the DOM manually to do what you are looking for, check the snippet below. I simulated your "database request" with a timeout function.
angular.module("app", [])
.controller("MainController", MainController);
MainController.$injector = ['$timeout'];
function MainController($timeout) {
var vm = this;
vm.post = null;
function loadStuff() {
$timeout(function() {
vm.post = {
title: "Post Title",
content: "Post Content"
};
}, 1000);
}
loadStuff();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController as main">
<p ng-hide="main.post">Loading...</p>
<h3>{{main.post.title}}</h3>
<p>{{main.post.content}}</p>
</div>
$FirebaseJS.Run(function(){
$scope.$apply(function(){
$scope.obj = globalOBJ;
});
});
Finally I got it.
I have following code in my app.js in root directory /app.js
angular.module("ngClassifieds",[])
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
Currently this is working fine, then i shift my controller inside new directory components/classifiedCtrl.js like this
below is my app.js file
angular.module("ngClassifieds",[]);
below is my controller inside components/classifiedCtrl.js
(function () {
"use strict";
angular.module("ngClassifieds")
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
}) ();
Now it is gives me the error Error: [ng:areq] Argument 'classifiedsCtrl' is not a function, got undefined
I am using angular version 1.5.7
below is my index.html file
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app = "ngClassifieds" ng-controller="classifiedsCtrl">
<h1>{{name}}</h1>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
You need to include your controller file below app.js
<script src="scripts/app.js"></script>
<script src="scripts/components/classifiedCtrl.js"></script>
I try to display some variable of my controller, but the output is just {{UserCtrl.user}} instead of the content of UserCtrl.user.
I got the following file structure:
index.html
scripts/app.js
This is the code of index.html:
<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
<meta charset="utf-8">
<title>Birdsnest</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
<div ng-controller="UserController as UserCtrl">
{{UserCtrl.user}}
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
scripts/app.js:
(function() {
var app = angular.module('birdsnest', []);
app.controller('UserController', ['scope', function($scope) {
$scope.user = 'Michael';
}]);
})();
Change this line:
app.controller('UserController', ['scope', function($scope) {
To:
app.controller('UserController', ['$scope', function($scope) {
Edit:
If you're using controllerAs then I think you should rewrite your code:
app.controller('UserController', function() {
this.user = 'Michael';
});
When you're using the ControllerAs syntax in your HTML, the values that end up getting bound to the controller instance is actually on your this object.
What this means is that your code that attaches user to the scope object is incorrect; instead you should do the following:
app.controller("UserController", function() {
this.user = "Michael";
});
I've looked through other "function is not defined" questions, but can't seem to find one that's applicable to my use case. I'm using angular.js.
I have an initially empty div, #mylist that I am populating dynamically in the js. I have a function defined inside a controller that I'm assigning to onChange event of a checkbox.
Here is the full doc:
<!doctype html>
<html data-ng-app="testapp">
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="angular.min.js"></script>
<script>
var app = angular.module("testapp", []);
app.controller("MyAppController", function ($scope) {
createCheckbox();
function doSomething() {
alert("hello!");
}
function createCheckbox() {
$("#mylist").html("<input type='checkbox' onChange='javascript:doSomething();' />");
}
});
</script>
</head>
<body data-ng-controller="MyAppController">
<div id="mylist"></div>
</body>
</html>
When run, clicking on the checkbox results in the function not defined error.
What am I missing here? Thanks.
<!doctype html>
<html data-ng-app="testapp">
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="angular.min.js"></script>
<script>
var app = angular.module("testapp", []);
app.controller("MyAppController", function ($scope) {
$scope.someProperty = true;
$scope.$watch("someProperty", function (someProperty){
alert("hello!"+someProperty)
});
});
</script>
</head>
<body data-ng-controller="MyAppController">
<div id="mylist"><input type="checkbox" ng-model="someProperty"/></div>
</body>
</body>
</html>
http://jsfiddle.net/y6XhY/
If you use AngularJs, it's good practice to defined function inside you controller scope.$scope's field can be your function and instead of onChange you can use ngChange directive (only you have to set ngModel on that input).
$scope.doSomething = function() {
alert("hello!");
}