AngularJS Dependency injection failure - Drag&Drop - javascript

I'm trying to implement a Drag&Drop system.
I've found an amazing one :
http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested
Github:
https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues
Now, it says load "dndLists" into my Dependency -
So my app looks like this:
var app = angular.module('clarus_app', ['ngRoute'], ['dndLists'] );
but then it crashes.
angular.js:116 Uncaught Error: [$injector:modulerr] Failed to instantiate module clarus_app due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
No idea what I'm doing wrong.
The controller the page uses looks like this:
app.controller("logCtrl", ['$scope','$location','$http', function($scope, $location, $http){
Any help? any idea?
Thanks in advance.

You have 2 different array arguments for module dependency and only want one array containing all dependencies
Change
var app = angular.module('clarus_app', ['ngRoute'], ['dndLists'] );
To
var app = angular.module('clarus_app', ['ngRoute','dndLists'] );
// ^^ single array of dependent module names

Related

Failed to instantiate module myApp

Facing the following error:-
Failed to instantiate module myApp due to:
Error: [$injector:nomod]
at Error (native)
at
If i remove the content from function then I am not facing the issue but when I put it in the function legislator and try to call it I get the issue. Is there any way to solve it by keeping it in the function only. I kind of need to use it again and again.
The code can be found at:-
https://raw.githubusercontent.com/anirbanmishra/congress.php/master/web_test
You have instantiated the module inside a function and called the function inside onclick.
<html lang="en" ng-app="myApp">
<a href="#legislator" onclick="legislator()">
<script>
function legislator() {
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
....
}
</script>
That module instantiation part should be outside.
EDIT : For your second problem, angularUtils.directives.dirPagination should not be passed as a dependency in module instantiation.
This link might help you.
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
should be replaced with
var app = angular.module('myApp', []);
Replacing this would still give you error about legislators.length not defined... That you need to look yourself, that's not related to angular, some issue with the http request you had made to getData.php.

Unable to unit test an Angular directive that uses $window

I've got a bunch of working unit tests for various Angular (1.4.7) directives, and I'm using Karma, Jasmine and Sinon for testing.
I'm trying to add a unit test for a new directive, which is the only directive I currently have that uses $window but I'm seeing a cryptic error in the console output:
TypeError: 'undefined' is not an object (evaluating 'this.proxy.toString')
This error is coming from sinon.js at line 2372.
I'm doing all the 'normal' things in a directive unit test such as creating a fake element that has the directive as an attribute:
testElement = document.createElement('div');
testElement.setAttribute('data-my-directive');
document.body.appendChild(testElement);
And compiling the directive:
$compile(testElement)($scope);
I'm using $provide to try mock the $window object:
module('app', function ($provide) {
$provide.value('$window', { id: 'test' });
});
But as soon as I try to use $window in the file being tested, the error shown above is thrown.
As I say, I have a bunch of other unit tests for other directives, services and controllers working as expected, so everything appears to be setup correctly. It's just this particular test.
Any ideas?
I am not sure if this is the same bug, but just a couple of days ago a fix to similar issue was got solved on sinon github:
https://github.com/sinonjs/sinon/pull/833
Fix contains lines:
var callStr = this.proxy ? this.proxy.toString() + "(" : "";
where the null check is one thing and several other lines.
This fix is at file lib/sinon/call.js in commit 7a18eb5.
I am not sure if this is same, because file is different and so is line, too. Still, this was so interesting that I would try latest sinon version and see if this gets fixed. It may be though, that similar error is in several parts of sinon, if the coder is for example same in both files.

Angular Underscore Cannot read property 'find' of undefined

I'm trying to return the object with a specific "ID" from the json service. I can see the objects in my console log but any attempt to iterate or use underscore _find gives me "undefined"
var metaresult = _.find($scope.results.results, function(rw){ return rw.id == $scope.answer1 });
gives me this error:
TypeError: Cannot read property 'find' of undefined
at k.$scope.metaResult (https://evening-taiga-2443.herokuapp.com/js/controllers/MainController.js:173:21)
Here is my factory:
app.factory('results', ['$http', function($http) {
return $http.get('js/services/results.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
any my json structure:
{
"results": [
{
"id": "a"
},
.... and so on
EDIT: So the issue seems to be dependency. I tried using ng-underscore instead and I'm loading as follows:
<script src="js/ng-underscore.min.js"></script>
then the app.js
var app = angular.module("quizApp", ['720kb.socialshare', 'ngUnderscore']);
Then in my controller
app.controller('MainController', ['$scope', 'quiz', 'results', function($scope, quiz, results, underscore)
typing "underscore" into console gives me:
Uncaught ReferenceError: underscore is not defined
EDIT: Figured it out just need to use lodash
var metaresult = _.find( ...
TypeError: Cannot read property 'find' of undefined
This error means that javascript didn't know what is _. _ is undefined and when you do _.find then error is generated. It seems you're not loading libraries properly. Kindly make sure you have added the underscore js module. Once underscore is loaded, _ will reference to the js module and you will be able to use all the methods.
Once get the libs to load correctly, it should be:
var metaresult = _.findWhere($scope.results.results, { id: $scope.answer1.id });
http://underscorejs.org/#findWhere
_ would be referring to either lodash or underscore which are both javascript utility libraries. I would suggest that you take a look at bower which is a package manager for front end libraries and make sure that you both have the necessary files in your project and also that they are being referenced in your HTML.
I would personally recommend that you use lodash instead of underscore as it is essentially a drop in replacement and offers performance benefits. That being said, there is absolutely no reason to use an angular module wrapper in based on the code that you've shown here. Simply downloading lodash and including it in your HTML will make it available for use inside your controller without having to worry about any module dependencies or controller injection.

Unsure why 'userApp' module is unavailable

Just getting started with angularJS and I'm unsure as to why I'm getting module unavailable.
The first code snippet is the one referenced in the HTML (main.js).
'use strict';
angular.module('userApp')
.controller('MainCtrl', function($scope, $http) {
$scope.user = [];
$http.get('http://127.0.0.1:8080/collector/50001366562').success(function(data) {
$scope.user = data;
})
})
<html ng-app="userApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="js/controllers/main.js"></script>
</head>
<body ng-controller="MainCtrl">
{{user}}
</body>
</html>
Can someone please explain why this doesn't work?
In the chrome JS console I get the following errors:
Uncaught Error: [$injector:nomod] Module 'userApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Uncaught Error: [$injector:modulerr] Failed to instantiate module userApp due to:
Error: [$injector:nomod] Module 'userApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
The function angular.module can be used both as getter and setter:
You have to use setter when creating new module
angular.module('userApp', []);
The second param here is dependencies array
When you wanna access your existing module, e. g. to add services, controllers etc you can use getter (w/o second param)
angular.module('userApp')
Getter will return you the module, it can be called many times during app lifecycle.
I'm also pretty new to Angular but when you declare a module don't you need that second parameter?
angular.module('userApp', []);
This solution is what the error message is communicating:
If registering a module ensure that you specify the dependencies as the second argument.

Angular JS Uncaught Error: [$injector:modulerr]

I am having a problem with Angular JS receiving an error : Uncaught Error: [$injector:modulerr].
My JS-file looks
angular.module('MyApp', ['ngRoute']);
angular.module('MyApp',['ngResource']);
function TwitterCtrl($scope,$resource){
}
I also included angular-route-js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js">
Angular documentation says the problem is http://docs.angularjs.org/api/ngRoute
In development environments I recommend you to use not minified distributives. And all errors become more informative! Instead of angular.min.js, use angular.js.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">
Try adding this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
Try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">
and:
angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}
You should call angular.module only once with all dependencies because with your current code, you're creating a new MyApp module overwriting the previous one.
From angular documentation:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.
Make sure you're function is wrapped in a closure, complete with the extra () at the end:
(function(){
var app = angular.module('myApp', []);
})();
I previously had the same issue, but I realized that I didn't include the "app.js" (the main application) inside my main page (index.html).
So even when you include all the dependencies required by AngularJS, you might end up with that error in the console. So always make sure to include the necessary files inside your main page and you shouldn't have that issue.
Hope this helps.
The problem was caused by missing inclusion of ngRoute module. Since version 1.1.6 it's a separate part:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module('myapp', ['ngRoute']);
This is getting reference from: AngularJS 1.2 $injector:modulerr David answer
I had the same problem. You should type your Angular js code outside of any function like this:
$( document ).ready(function() {});
I got this error because I had a dependency on another module that was not loaded.
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function(){}...
so even though I had all the Angular modules, I didn't have the kendo one.
ok if you are getting a Uncaught Error: [$injector:modulerr] and the angular module is in the error that is telling you, you have an duplicate ng-app module.
Make sure that the variable that holds your angular.module is structured correctly.
This will fail with "Uncaught Error: [$injector:modulerr]":
var angApp = angular.module("angApp");
This works:
var angApp = angular.module("angApp", []);
It's a sneaky one since the error message doesn't point to one thing in particular (Thus the wide variety of answers). Additionally, most js linters won't catch the particulars. Keep at it!
I had exactly the same problem and what resolved it was to remove the closure:
$(function(){
var app = angular.module("myApp", []);
app.controller('myController', function(){
...
});
});
becomes:
var app = angular.module("myApp", []);
app.controller('myController', function(){
...
});
The error means that the dependency injector was unable to locate the dependency 'ngResource'. The script tag in the accepted answer provides this dependency.
You will also get the same error if you add any custom modules in the dependencies but did not add the script tag for including the '.js' file containing the dependency.
Just throwing this in in case it helps, I had this issue and the reason for me was because when I bundled my Angular stuff I referenced the main app file as "AngularWebApp" instead of "AngularWebApp.js", hope this helps.
I had also same issue, I have just removed following line of code from BundleConfig.cs file and my code is working fine.
BundleTable.EnableOptimizations = true;
Do not load the javascript inside the cdn link script tag.Use a separate script tag for loading the AngularJs scripts.
I had the same issue but I created a separate <script>
Then the error gone.

Categories