How to fix angular js ng-controller function call?

How to fix angular js ng-controller function call? - javascript

I created a basic angular js module where I am passing the module and the controller message in a separate script file. The issue I am facing is it does not print the message defined in the called function. This seems to me might be an issue with the ng-app defined.
Here is the code :
module.html
<!doctype HTML>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src = "D:\Educational\angularJS code\script.js"></script>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
</body>
</html>
And here is the called script.
script.js
var myApp = angular.module("myModule",[]);
var myController = function($scope){
$scope.message = "Angular JS";
}
myApp.controller("myController", myController);
The only thing that gets printed in the format is {{message}} and NOT the actual message "Angular JS".
Any suggestions would be of great help.

Since you have your script.js in the same folder just include it simply by
<script src="script.js"></script>
make sure you have internet on your computer since you are using a CDN
Note: please check your console by pressing ctrl+j or f12 to see if there are any errors
You can also try putting your code into the markup itself for now and check if the code works fine.
<script>
var myApp = angular.module("myModule",[]);
var myController = function($scope){
$scope.message = "Angular JS";
}
myApp.controller("myController", myController);
<script>

Related

Seperate AngularJS controller files with local HTML page

I am trying to run a local webpage with AngularJS with dynamically driven controllers. I'd like a URL variable to drive which particular javascript file is loaded with data to drive my page.
HTML File
<html>
<head >
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script>
var app = angular.module("myApp", []);
</script>
<script>
var url = new URL(window.location.href);
var t_var= url.searchParams.get("t_var");
var x = document.createElement('script');
x.src = t_var +'.js';
document.getElementsByTagName("head")[0].appendChild(x);
</script>
</head>
<body ng-app='myApp' ng-controller='Ctrl1'>
{{sub1Variable}}
</body>
</html>
AngularJS controller
app.controller("Ctrl1", function($scope) {
$scope.sub1Variable = 'sub1'
});
I have been able to get this to work if I include the below tag in the HTML file.
<script src="sub1.js"></script>
I keep receiving an error that a controller with this name is not referenced.

In principle what you are doing here should be fine. See below.
app.controller("Ctrl1", function($scope) {
$scope.sub1Variable = 'sub1'
});
<html>
<head >
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script>
var app = angular.module("myApp", []);
</script>
</head>
<body ng-app='myApp' ng-controller='Ctrl1'>
{{sub1Variable}}
</body>
</html>
If you run that you should see 'sub1' in the output.
So, if you are receiving the error saying that your controller isn't registered then almost certainly the problem is you aren't loading the JavaScript file that contains your controller registration. Make sure the script that contains the app.controller... line is included through a <script> element at some point after loading angular and registering the module.
(Remember the SO Snippet and CodePen etc will implicitly include the JavaScript for convenience, in real code we need to do it ourselves).
In fact, if this is just a quick local app maybe you can just include it in the same script element as the module registration, like so:
<html>
<head >
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script>
var app = angular.module("myApp", []);
app.controller("Ctrl1", function($scope) {
$scope.sub1Variable = 'sub1'
});
</script>
</head>
<body ng-app='myApp' ng-controller='Ctrl1'>
{{sub1Variable}}
</body>
</html>

Getting an angularjs error from a basic app

Code:
<!DOCTYPE html>
<html>
<head>
<!-- angular -->
<script src="angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<p>{{ title }}</p>
</div>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Directives -->
<script src="timelineInfo.js"></script>
</body>
</html>
All my files are in the same folder because I was having a problem doing src="js/...".
I get the error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…0%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8080%2Fangular.min.js%3A20%3A42
I don't exactly understand what the website was suggesting. I'm using the angular.min.js in my index directory because linking it to the http file was giving me issues. All I'm trying to do is run a simple app so I can build from there but even that is giving me issues.
(I am running from a local machine)
Thanks!!
---------------------------------OTHER FILES----------------------
app.js:
var app = angular.module("timelineApp", []);
MainController.js:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);

The problem is that in your html you have app module referenced in ng-app. And in your app.js you have module name as timelineApp.
You need to sync them.
Either update your app.js
from
var app = angular.module("timelineApp", []);
to
var app = angular.module("app", []);
Or update your markup from
<body ng-app="app">
to
<body ng-app="timelineApp">

ng-app value in your html code should have the same as the angular module in your javascript.
For example in you case it should be following:-
<ng-app="timelineApp"> // in your html code
or following:-
var app=angular.module('app',[]); // in your javascript
Also, if you still face the error after that too, then you can one of my answers on the same here

The error you are getting refers to the fact that your application is not bootstrapped correctly. Hence Angular's compiler does not understand the directives it encounters; in this case, that would be ng-controller
It's important that you understand what's happening.
var app = angular.module("timelineApp, []")
and subsequently
<body ng-app="app">
ng-app should really be timelineApp since that is what you set the name of your angular module to.
The code above "bootstraps" your application. Once you application is bootstrapped, Angular's compiler will go through the page's markup. When it encounters ng-app directive, it will look at its value timelineApp and know that it is registered as an angular application.
This also help it understand that you have a controller registered on the app:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);

Angular js script is not executing [duplicate]

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>

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>

You have to define your controller
var app = angular.module('app', []);
app.controller('Ctrl', ['$scope',function($scope) {
$scope.age = 24;
}]);

Be Sure that ng-app="app_name" define must match to
var app=angular.module('app_name',[])
<html ng-app="myApp">
<body>
<div ng-controller="Ctrl">
<input ng-model="name">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<script>
var app = angular.module('myApp',[]); // same to the above define appName
app.controller('Ctrl',function($scope){
$scope.age=24; // initialize age by injecting scope
});
</script>
</body>
<html>
For more details visit Here

Check the version of angularjs in your html file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
Call your javascript file in your HTML file
<script src="app.js"></script>

Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

This is my demo using angularjs, for creating a service file, and adding service to a controller.
I have two problems with my demo:
One is when I put <script src="HomeController.js"> before <script src="MyService.js"> I get this error,
Error: [ng:areq] Argument 'HomeController' is not a function, got undefined
The other is when I put <script src="MyService.js"> before <script src="HomeController.js"> I get the following error,
Error: [$injector:unpr] Unknown provider: MyServiceProvider <- MyService
My source:
File Index.html:
<!DOCTYPE html>
<html >
<head lang="en">…</head>
<body ng-app="myApp">
…
<div ng-controller="HomeController">
<div ng-repeat="item in hello">{{item.id + item.name}}</div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<!-- App libs -->
<script src="app/app.js"></script>
<script src="app/services/MyService.js"></script>
<script src="app/controllers/HomeController.js"></script>
</body>
</html>
File HomeController.js:
(function(angular){
'use strict';
var myApp = angular.module('myApp',[]);
myApp.controller('HomeController',function($scope,MyService){
$scope.hello=[];
$scope.hello = MyService.getHello();
});
})(window.angular);
File MyService.js:
(function(angular){
'use strict';
var myApp = angular.module('myApp',[]);
myApp.service('MyService', function () {
var hello =[ {id:1,name:'cuong'},
{id:2,name:'nguyen'}];
this.getHello = function(){
return hello;
};
});
})(window.angular);

This creates a new module/app:
var myApp = angular.module('myApp',[]);
While this accesses an already created module (notice the omission of the second argument):
var myApp = angular.module('myApp');
Since you use the first approach on both scripts you are basically overriding the module you previously created.
On the second script being loaded, use var myApp = angular.module('myApp');.

I experienced this error once. My problem was that I wasn't adding the FILE_NAME_WHERE_IS_MY_FUNCTION.js
so my file.html never found where my function was
Once I add the "file.js" I resolved the problem
<html ng-app='myApp'>
<body ng-controller='TextController'>
....
....
....
<script src="../file.js"></script>
</body>
</html>

Also ensure that your controllers are defined within script tags toward the bottom of your index.html just before the closing tag for body.
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>
provided everything is spelled "correctly" (the same) on your specific.html, specific.js and app.js pages this should resolve your issue.

Happened to me few times whenever I miss "," between list of injections and function
app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) {
}]);

I also experienced this error but in my case it was because of controller naming convention. I declared controller: "QuestionController" in .state but in controller definition I declared it like
yiiExamApp.controller('questionController' ...
but it should be
yiiExamApp.controller('QuestionController' ...
hope that helps to people facing this error because of this stupid mistake I wasted 4hour in identifying it.

I also encountered this same error and the fix for me was to include my child module in the main module array.
var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);

If ALL ELSE fails and your running locally on the MEAN stack like me with gulp...just stop and serve again! I was pulling my hear out meticulously checking everything from all of your posts to no avail till I simply re-ran gulp serve.

I got the same error. I defined java script like this
<script src="controllers/home.js" />
then I changed to the this
<script src="controllers/home.js"></script>
After this my problem is solved.

I had similar issue. The fix was ensure that your ctrollers are not only defined within script tags toward the bottom of your index.html just before the closing tag for body but ALSO validating that they are in order of how your folder is structured.
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>

I also encountered this problem in my project. It eventually worked after I inserted the my-controller.js into my karma.conf.js file, with the <script> tag.
Hope this will help. There are quite many reasons that can lead to this problem.

I also got this error.
I had to add my new controller to routing information.
\src\js\app.js
angular.module('Lillan', [
'ngRoute',
'mobile-angular-ui',
'Lillan.controllers.Main'
])
I added my controller to make it look like
angular.module('Lillan', [
'ngRoute',
'mobile-angular-ui',
'Lillan.controllers.Main',
'Lillan.controllers.Growth'
])
Cheers!

Obviously that previous posts are useful, but any of above are not helpful in my case. The reason was in wrong sequence of loading scripts. For example, in my case, controller editCtrl.js depends on (uses) ui-bootstrap-tpls.js, so it should be loaded first.
This caused an error:
<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
This is right, works:
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>
So, to fix the error you need first declare all scripts without dependencies, and then scripts that depends on previously declared.

Try this
<title>My First Angular App</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<h3>Adding Simple Controller<h3>
<div ng-controller="SimpleController">
Name:
<br/>
<input type = "text" data-ng-model = "name"/> {{name}}
<br/>
<ul>
<li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script>
var angularApp = angular.module('angularApp',[]);
angularApp.controller('SimpleController', [ '$scope', SimpleController]);
function SimpleController($scope)
{
$scope.customers = [
{name:'Nikhil Mahirrao', city:'Pune'},
{name:'Kapil Mahire', city:'Pune'},
{name:'Narendra Mahirrao', city:'Phophare'},
{name:'Mithun More', city:'Shahada'}
];
}
</script>
</body>

In my case, I was missing the name of the Angular application in the html file. For example, I had included this file to be start of my application code. I had assumed it was being ran, but it wasn't.
app.module.js
(function () {
'use strict';
angular
.module('app', [
// Other dependencies here...
])
;
})();
However, when I declared the app in the html I had this:
index.html
<html lang="en" ng-app>
But to reference the Angular application by the name I used, I had to use:
index.html (Fixed)
<html lang="en" ng-app="app">

I was getting the error because i had added the controller script before the script where i had defined the corresponding module in the app.
First add the script
<script src = "(path of module.js file)"></script>
Then only add
<script src = "(path of controller.js file)"></script>
In the main file.

Error: ng:areq Bad Argument has gotten me a couple times because I close the square bracket too soon. In the BAD example below it is closed incorrectly after '$state' when it should actually go before the final parenthese.
BAD:
sampleApp.controller('sampleApp', ['$scope', '$state'], function($scope, $state){
});
GOOD:
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){
}]);

Yes. As many have previously pointed out,
I have added the src path to all the controller files in the index.html.
<script src="controllers/home.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/signup.js"></script>
This fixed that error.

I had the same problem, but I forgot to include the file into grunt/gulp minimization process.
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
}
}
}
});
Hope that helps.

In my situation this error appeared when I didn't declare function within an array argument.
The one with error:
taskAppControllers.controller('MainMenuCtrl', []);
The fixed one:
taskAppControllers.controller('MainMenuCtrl', [function(){
}]);

Also check for spelling mistakes.
var MyApp = angular.module('AppName',[]);
MyApp.controller('WRONG_SPELLING_MyCtrl', ['$scope', MyControllerCtrl])
function MyControllerCtrl($scope) {
var vm = $scope;
vm.Apple = 'Android';
}
<div ng-controller="ACTUAL_SPELLING_MyCtrl">
{{Apple}}
</div>

Check if your HTML page includes:
angular.min script
app.js
controller JavaScript page
The order the files are included is important. It was my solution to this problem.
Hope this helps.

sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){
Same thing for me, comma ',' before function helped me in fixing the issue -- Error: ng:areq Bad Argument

My controller file was cached as empty. Clearing the cache fixed it for me.

I accidentally moved my HomeController.js out of the directly, where it was expected.
Putting it again on original location.
After that my website started to load pages automatically every second, I was even unable to look at the error. So i cleared the browser cache. It solved the problem

For me the solution was to add a semicolon after one of the functions declared in my HomeController.js
//Corrected code is :
app.controller('HomeController', function($scope, $http, $log) {
$scope.demo1 = function(){
console.log("In demo");
} //Here i forgot to add the semicolon
$scope.demo2 = function(){
console.log("In demo");
};
});

AngularJS: Unable to define Controller

I have just started developing with AngularJS a few days ago, and this issue really bugs me.
I keep getting this error:
Error: ng:areq
Bad Argument
Argument 'NewStudentCtrl' is not a function, got undefined
All other controllers are working since I am using them in other files, just NewStudentCtrl won't work.
I have tried a lot of different things, only one worked: defining the controller using function NewStudentCtrl ($scope) {} inside the HTML file itself right before the use of the controller. The problem is that I want to split HTML and JS into seperate files.
Please note that the provided source is simplified a lot, there might be little indentation or syntax errors.
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>var app = angular.module('myApp',[]);</script>
</head>
<body>
<div ng-controller="NewStudentCtrl">
<div ng-controller="AccountMenuCtrl">
</div>
<script src="js/account-menu.js">
function AccountMenuCtrl ($scope) {
}
</script>
<div ng-controller="OrtsteileCtrl">
<option value="{{ortsteil.ID}}" ng-repeat="ortsteil in ortsteile">
{{ortsteil.Name}}
</option>
</div>
</div> <!-- end NewStudentCtrl -->
<!-- Loading dependencies -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/new-student.js">
var app = angular.module("myApp");
function NewStudentCtrl ($scope) {
}
</script>
<script src="js/plz.js">
angular.module('myApp').controller('OrtsteileCtrl', ['$scope', '$http',
function($scope, $http) {
}]);
</script>
</body>
</html>

EDIT: Scratch that, something I didn't realise is that angular is happy with mixing them.
The issue is because you are recreating your module several times:
Line 4: <script>var app = angular.module('myApp',[]);</script>
Line 28: var app = angular.module("myApp");
Line 34: angular.module('myApp').controller(...
fiddle: http://jsfiddle.net/uXpqL/

Develop Reference

JavaScript is the programming language of the Web.

How to fix angular js ng-controller function call? - javascript

Related

Seperate AngularJS controller files with local HTML page

Getting an angularjs error from a basic app

Angular js script is not executing [duplicate]

Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

AngularJS: Unable to define Controller

Categories

Resources