I am getting AngularJS bad argument error while running the following example, please let me know where I am doing wrong ? Actually the following code is working fine if I run outside/normally, but when I copy/paste this code in my application, it is giving the following error. (this page/tab is displaying from my application's controller like: TestController, which is available in coffeescript. but I don't need any coffeescript for this requirement, I need it in AngularJs. So, In this tab, I need to display the below code/button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApplication', []);
myApp.controller('TestController', ['$scope', function($scope){
$scope.test = function(){
alert("Success");
}
}]);
</script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="TestController">
<div class="tab-pane" id="wizards">
<button type="button" ng-click="test();">Test</button>
</div></div></div>
</body>
</html>
Error: Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined
This Plunker is working for me
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="WizardController">
<button ng-click="test()">Test</button>
</div>
</div>
</body>
Related
I just started with Angular JS (version 1), and not been able to get the interpolation running correctly. I already checked it with solved versions, and looks fine to me. I even placed a console.log inside controller and its not printing anything. Please help.
index.html
<!doctype html>
<html lang="en" np-app="LunchCheck">
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<title>Lunch Checker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.message { font-size: 1.3em; font-weight: bold; }
</style>
</head>
<body>
<div class="container" ng-controller="LunchCheckController">
<h1>Lunch Checker</h1>
<div class="form-group">
<input id="lunch-menu" type="text"
placeholder="list comma separated dishes you usually have for lunch"
class="form-control" ng-model="food">
Content is: {{food}}
</div>
</div>
</body>
</html>
app.js
(function(){
'use strict';
angular.module('LunchCheck', [])
.controller('LunchCheckController', LunchCheckController);
LunchCheckController.$inject = ['$scope'];
function LunchCheckController($scope){
console.log("In controller");
$scope.food = 'Enter something';
}
})();
replace np-app by ng-app it will work
You've written np-app instead of ng-app
<html lang="en" np-app="LunchCheck">
This AngularJS code works while located in the HTML file:
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('ChgReqApp', []);
angular.module('ChgReqApp').controller('MainController', function ($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
</script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
The MainController.js file looks like this and the alert dialog works as expected:
// MainController.js
$(function () {
alert("MainControllerFile");
});
Now, when I move the controller code to the MainController.js file, I get an error:
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('ChgReqApp', []);
</script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
//MainController.js
$(function () {
angular.module('ChgReqApp').controller('MainController', function ($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
});
The error is:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
http://errors.angularjs.org/1.4.8/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined
at ...
I have searched for a solution to this problem but all the discussions I have found relate to some other issue not applicable to the above code. The external js file is valid and the scripts are in the correct order. Any help on this is greatly appreciated.
There is no need for $(function() {}) because Angular has its own "Document Ready business" (just to simplify to the max :P).
The problem is that Angular can't run its "Document Ready Business" because you are putting Angular stuff inside jQuery's "Document Ready" shorthand and that stops the Angular framework from working properly.
You can read more about this in Angular's documentation
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root.
I think you can see how this conflicts with what you are trying to do.
Also as an additional suggestion go like this:
angular.module('ChgReqApp', []).controller('MainController', function($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
or like this (my preference)
var app = angular.module('ChgReqApp', []);
app.controller('MainController', function($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
(function() {
angular
.module("ChgReqApp", [])
.controller("MainController", MainController);
MainController.$inject = ["$scope"];
function MainController($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
};
})();
you can read more information here : https://github.com/johnpapa/angular-styleguide
This is what I found that FIXED my problem...
the CHROME browser was CACHING the (MainController.js)
I found this out by looking at (Chrome devtools, Network tab,
MainController.js file, Response TAB) (* THE CODE WAS DIFFERENT
*)
OPEN A NEW TAB in Chrome (fixed the cached MainController.js file)
I was having the same problem. I was just trying to put some VALUES in a MainController.js file EXTERNALLY.
<script src="./js/controllers/MainController.js"></script>
For some reason it wasn't working (from this file)...
But...
when I tested directly from the HTML file (it worked)
app.controller('MainController', ['$scope', function($scope) {
// SCOPE
$scope.test = "test(HTML FILE)";
$scope.test2 = 'test2(HTML FILE)';
}]);
...but NOT IN THE EXTERNAL FILE?
DISABLE CACHE (CHROME)
open CHROME, (DevTools), Networks tab, CLICK (ON) (Disable Cache)
try this
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
//MainController.js
angular.module('ChgReqApp').controller('MainController', function ($scope) {
alert('in main controller');
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
I am new in angular and can't able to find error in below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
function testController($scope){
$scope.data = {message: "test123"};
}
</script>
</head>
<body>
<div ng-app="">
<div ng-controller="testController">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
The above code print <<data.message>> as output. Please let me know where I go wrong.
You haven't defined your angular module.
For example
var app = angular.module('app', []);
Then in your HTML:
<html ng-app="app">
You need to register the controller in your angular app.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
var DummyCtrl = function ($scope){
$scope.data = {message: "test123"};
}
angular.module('app', [])
.controller('DummyCtrl', DummyCtrl);
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="DummyCtrl">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
You need to register your controller with angular.
angluar.module(APP_NAME).controller("testController", testController);
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
I'm including angular.min, angular-route and even angular-resource and animate...
You had wrong ng-app module, it should be ng-app="friendsList" instead of app.
The error is not due to angular versions, it is because you are injecting wrong dependency in your app mdoule. Simply you can not inject mainCtrl inside your module as its controller mainCtrl which you are going to register with your module.
var app = angular.module('friendsList', []);
Also you should have ng-controller="mainCtrl" on html.
<section ng-controller="mainCtrl">
</section>