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.
Related
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
In one file i have created module & controller as
var module = angular.module('app', []);
module.controller('ContactController', function ($scope, ContactService)
Then in second file i created service
module.service('ContactService', function ($http)
And included this service file in Main controller file. But getting error as module not defined and service not defined.
Try to give some different name while defining the module. Also make sure that you have inserted the module in the HTML.That is for example,
<html ng-app="your module definition name here">
Don't use global variable for angular.module
angular.module('app', []).controller('ContactController', function ($scope, ContactService);
angular.module('app').service('ContactService', function ($http);
Only first time you need second argument in angular.module.
I'm working on angular tutorial and i'm having a problem on beginning. Loading myApp module throws error. As explained in tutorial, this should be one of three ways to create controller.
Here is print screen from tutorial i'm working on:
When i refresh web page i get this error in Chrome console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' 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.
This is my HTML file
<html ng-app="myApp">
<head>
</head>
<body>
<h1>Hello world!</h1>
<div ng-controller="MainController">
{{ 2+2 }}
<br>
{{ val }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="app.js">
</body>
</html>
This is my app.js file
var myApp = angular.module('myApp', []);
var MainController = function($scope){
$scope.val = "Main controller variable value"
}
So what is my problem? I can't figure it out.
Thank you in advance
Module 'myApp' 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.
Your original issue is due to the invalid script tag. Basically your script tag is not closed it needs to be closed in order for the browser to download the app.js file. Script tags are not self closing so it needs a closing tag.
<script src="app.js">
should be
<script src="app.js"></script>
Now once you fix that you will get into another error.
[ng:areq] Argument 'MainController' is not a function, got undefined
Since you are using the latest angular version, i.e anything >= 1.3.x needs the controller to be registered manually using the .controller construct. See here for more details.
Note - it is a bit confusing because the screenshot shows you using 1.2.0 (which does not necessarily needs explicit controller registration) but snippet in the question shown 1.4.x.
You should register a controller to the angular module myApp.
App.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', MainController );
var MainController = function($scope){
$scope.val = "Main controller variable value"
}
Basically what you were doing is correct but that code has been followed by the older version of AngularJS, The way you declared your controller is nothing but known as controller As function, which needs enable allowGlobals() method of $controllerProvider. Since Angular 1.3 + allowGlobals() method is disabled by adding below code, you could turn it on, to make your code working but it is not recommended way to do this.
Config
myApp.config(['$controllerProvider',
function($controllerProvider) {
$controllerProvider.allowGlobals();
}
]);
Refer same SO Answer here
Try this:
myApp.controller ("MainController",[$scope, function ($scope){
$scope.val = "Main controller variable value"
}]);
The ng-controller directive looks for the MainController in your MyApp module.
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.
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.