I am new to Angularjs and I was following a tutorial but I got the error in the title.
HTML code:
<div data-ng-app="myApp">
<div data-ng-controller="MyCtrl">
<form>
<table>
<tr style="font-weight: bold">
<td>ID</td>
<td>Name</td>
<td>Surname</td>
<td>House</td>
<td>Address</td>
<td>Locality</td>
<td>Contact</td>
<td>Contact 2</td>
<td>Contact 3</td>
<td>Reply</td>
<td>Edit</td>
</tr>
<tr data-ng-repeat="person in persons">
<td>{{person.ID}}</td>
<td>{{person.Name}}</td>
<td>{{person.Surname}}</td>
<td>{{person.House}}</td>
<td>{{person.Address}}</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript">
//Defining a Angular module
var myApp = angular.module('myApp', []);
//Defining a Angular Controller
myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
//Retrieving the List of people
GetPersons();
//Displaying the Save button
$scope.DisplaySave = true;
function GetPersons() {
//Defining the $http service for getting the people
$http({
method: 'GET', url: '/api/data'
}).
success(function (data) {
if (data != null || data != 'undefined') {
//Assigning people data to the $scope variable
$scope.persons = data;
//Clearing the Person object in create context and Showing default Gender(Male) Checked
$scope.newperson = {
Id: ''
};
}
})
.error(function (error) {
//Showing error message
$scope.status = 'Unable to retrieve people' + error.message;
});
}
} ]);
</script>
API COntroller:
public class DataController : ApiController
{
//GET api/data
public IEnumerable<CommonLayer.Telesales> GetPeople()
{
return new BusinessLayer.Telesales().getUserSession(User.Identity.Name).AsEnumerable();
}
More error details:
magicplayer:init: set version: 1.0.1
adme: onDOMStart: got code: user_key=f52009a2292c2b524ac9af2801caef4c443d7cdc7697dff171f77b3c81cd26fa gender=1 age=4
Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.18/ng/areq?p0=MyCtrl&p1=not%20a%20function%2C%20got%20undefined
at http://localhost:12570/Scripts/angular.js:78:12
at assertArg (http://localhost:12570/Scripts/angular.js:1475:11)
at assertArgFn (http://localhost:12570/Scripts/angular.js:1485:3)
at http://localhost:12570/Scripts/angular.js:7198:9
at http://localhost:12570/Scripts/angular.js:6592:34
at forEach (http://localhost:12570/Scripts/angular.js:327:20)
at nodeLinkFn (http://localhost:12570/Scripts/angular.js:6579:11)
at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6028:13)
at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:12570/Images/accent.png
onMessageFromBackground: method=statPixel
what am I doing wrong? I search other solutions but it seems like my problem is a bit different.
Turns out I had and the following html tag in the layout page which was returning this error
<html lang="en ng-app">
Removed the ng-app from the tag and code works perfectly
In my case I had just forgotten to add a controller script to index.html
I got this kind of error when I misspelled my controller name. It was capitalized in the js file, but not in the ng-controller tag in the html file.
Sometimes this may occur when we are not binding module/controller to DOM properly. I came to same error and I found that my ng-app was assigned blank
<html ng-app="">
I needed to provide module name. I gave and it worked!
<html ng-app="app">
I got this error using a Material Design dialog in my Angularjs controller with a very hard to find typo:
templateUrl: 'template.html';
When I replaced the semicolon with the proper comma, it solved the problem.
templateUrl: 'template.html',
Sometime we use same module name in factory,controllers and main module.so,
this is main reason it will give error Error: [ng:areq] Argument,don't use same module name when u call calling your services,controllers,factory.
I drove myself crazy over this for a couple of hours after checking and double checking all the suggestions. But, it turned out that once I cleared my Chrome browser data (cookies, hosted app data and cached image and files), the error went away. Even a refresh does not seem to clear all the listed items enough .
I used <html ngapp> along with angular 1.4.8
Changed it to 1.2.8 and got rid of the error.
My html had
<div class ="container" ng-controller="AppCtrl">
and I had a controller.js file with the function
function AppCtrl(){
console.log("Hello from controller")
}
In my case:
by mistake I had two body tags <body ng-controller="CtrlWasNotFound"> <body></body </body>
not only that - the app.js returned the HTML of index.html ( was using gulp and had a configuration issue
To fix this problem, I had to discover that I misspelled the name of the controller in the declaration of Angular routes:
.when('/todo',{
templateUrl: 'partials/todo.html',
controller: 'TodoCtrl'
})
<sript
instead of
<script
;) while linking controller.js. In my case
Related
I am new to angular JS. Please take a look. This is my app.js file
angular.module("CrudDemoApp",["CrudDemoApp.controllers","ngRoute"]);
this is my controllers.js file
angular.module("CrudDemoApp.controllers", []);
controllers("MainController", function ($scope)
{
$scope.message = "Main Controller";
});
this is the my body part
<body ng-app="CrudDemoApp">
<div ng-controller="MainController">
{{message}}
</div>
</body>
firstly it is saying "Uncaught ReferenceError: controllers is not defined
at then it is saying
Error: [ng:areq] http://errors.angularjs.org/1.5.6/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined
angular.module("CrudDemoApp.controllers", []) //remove semicolon here adding the controller to this module
.controller("MainController", function ($scope) // dot before controller, remove "s"
{
$scope.message = "Main Controller";
});
notice the dot and lack of pluralization on controller
You should have probably seen some other errors before the ones you mentioned always work from the first one down sometimes 1 error causes the next.
I'm getting unexpected End of expression error when I pass nodejs data to to ng-init. I'm confident I'm doing it right however I'm getting the error message above
I call ng-init like so:
<body id="myPage" ng-app="myApp" ng-controller="arrCtrl" ng-init="items = <%- JSON.stringify(myitems) %>">
and the error is here
Unexpected end of expression: items = [{
Thus when I run
{{items}}
It'll display as is.
I also went ahead and declared my module in my script tag just in case like so
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function(){
console.log("Controller loaded");
});
</script>
I looked everywhere and no one seemed to have solved this issue.
I am a beginner with AngularJs and I am trying to use controller while creating a simple application. However I am getting an Error and I can't quite figure it out
Error: ng:areq Bad Argument. Argument 'languages' is not a function, got undefined
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Angular JS | Controllers</title>
<script type="text/javascript" src="../resources/js/angular.min.js"></script>
<script>
(function(angular){
var myApp = angular.module('myApp', []);
myApp.controller = ('languages', function($scope){
$scope.myFavLanguage = 'None';
});
})(window.angular);
</script>
</head>
<body >
<div ng-controller="languages">
Select your favourite langauge:
<button>ReactJS</button>
<button>PHP</button>
<button>JavaScript</button>
<button>C++</button>
<p>Your favourite language is {{myFavLanguage}}</p>
</div>
</body>
</html>
I have searched over the internet and gone through a few questions on stackoverflow and could'nt get any of them to solve my problem.
These are the ones that I have visited along with a few others. Kindly visit these before marking it as duplicate because it isn't:
Angularjs bad argument ng:areq error
Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined
Argument ... is not a function, got undefined
Thanks for any help
To define a controller, use the controller() method.
myApp.controller = ('languages', function($scope){
^
Remove the = from this.
myApp.controller('languages', function($scope) {
Check Docs for more information.
I'll suggest you to use min-safe syntax.
myApp.controller('languages', [$scope, function ('$scope') {
}]);
Just made a simple controller with some injection.
var SimpleProductListController = BaseController.extend({
_notifications:null,
_productsModel:null,
init:function($scope,ProductsModel,$route){
},
defineListeners:function(){
this._super();
},
destroy:function(){
}
})
/...
SimpleProductListController.$inject = ['$scope','ProductsModel','$route'];
The console error points to this:
http://errors.angularjs.org/1.2.16/ng/areq?p0=SimpleProductListController&p1=not%20aNaNunction%2C%20got%20undefined
Argument 'SimpleProductListController' is not aNaNunction, got undefined
How am I supposed to even debug this? I got batarang but it does nothing here.
Basically, Angular is saying that SimpleProductListController is undefined.
When I've gotten that error, it was because I created a controller and tried to inject it into my app but I did not load the file that defines that controller by adding the script tag to my index.html file.
I'm trying to update some texts on a page that is part of $scope. But I keep getting this error:
Error: [$rootScope:inprog] [http://errors.angularjs.org/1.2.15/$rootScope/inprog?p0=%24apply][1]
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:101:443)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:301)
at h.$scope.changeLang (http://treenovum.es/xlsmedical/js/medical-app.js:80:16)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:169:382
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:186:390
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:40)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:318)
at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:186:372)
Obviously I'm doing something wrong. :)
Any ideas of how I can fix this? I want the page to update to the new variables in the scope.
This is the code I'm using for updating:
medicalApp.controller('MainCtrl', function($scope, $cookies, getTranslation) {
getTranslation.get(function(data){
$scope.translation = data;
});
$scope.changeLang = function (lang) {
console.log(lang);
$cookies.lang = lang;
$scope.$apply(function(){
getTranslation.get(function(data){
$scope.translation = data;
console.log(JSON.stringify($scope.translation));
});
});
};
});
the html:
<body ng-controller="MainCtrl">
...
<div class="header-lang col-xs-4">
<p>
DE |
FR</p>
<div>{{ translation.text }}</div> <---- Example variable I want updated.
...
I'm also using ngRoute with separate controllers for each page I load, if that has anything todo with it?
If your template don't change after changing models and you need using $scope.$apply, You can use $scope.$applyAsync instead of this.
https://github.com/angular-ui/ui-codemirror/issues/73
You are using $scope.$apply(...) inside the function changeLang so you are getting the common 'already in a digest' error. You don't need to put the call to getTranslation inside a $scope.$apply(...) block because ng-click already has you taken care of. Yank that out and it should just work. Also, I'd recommend running with a non-minified version of angular for dev so you can see better errors in your console.
$evalAsync works great:
$scope.$evalAsync(function() {
// Code here
});
Or simply:
$scope.$evalAsync();
See: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync