I am trying to use the following https://embed.plnkr.co/plunk/pWNOdA in a project that uses strict-DI.
In the app-mockbackend.js you can see the following setup -
angular.module('app').run(function($httpBackend, ServerDataModel) {
$httpBackend.whenGET('/games').respond(function(method, url, data) {
var games = ServerDataModel.findAll();
return [200, games, {}];
});
}]);
When you run the app without strict it runs fine, but when you add ng-strict-di to your app I get:
Uncaught TypeError: can't access property "whenGET", $httpBackend is undefined
I have read the docs and with other areas, I have had to annotate services while using strict and the errors have subsided and it's great - I just cannot seem to figure this one out.
Hey Dale did you try to annotate the function?
https://docs.angularjs.org/guide/di#dependency-annotation
For example:
someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);
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 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
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
I am trying to run a very simple an basic sample of a backbone model that is found on a tutorial for learning the library.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.3/underscore.string.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script>
User = Backbone.Model.extend({
initialize: function() {
alert("Backbone model initialized");
}
});
var user = new User;
</script>
But on the console there are 2 errors :
Uncaught TypeError: Object # has no method 'each' on the backbone-min file
Uncaught ReferenceError: Backbone is not defined
And is not working.
Would yo please help me understand what am I doing wrong?
You're not loading the full underscore library. Replace the second script tag with the following:
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>