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.
Related
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.
I'm new to angular and am having trouble set my project up. I have tried everything I have seen on google and stackoverflow(please do not send link to similar question).. None have worked. Im using angular 1.5.5 and refer to the cdn. here is what my code looks like. Thanks!
<html ng-app="boatup">
<link href="css/one-page-wonder.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="mainCtrl">
</body>
//in app.js
var app = angular.module('boatup', [
'boatup.controllers',
'ngRoute'
]);
//in controllers.js
app.controller('mainCtrl', function($scope) {
console.log("hello");
});
The error is angular.js:38 Uncaught Error: [$injector:modulerr] in angular.js 38
Thanks for any help in advance.
Uncaught reference error in angular is caused when you are either using a module with no definition or the file with the module definition is not loaded in scripts. You have not declared the boatup.controllers module but added it as a dependency to your main module. Either declare and define boatup.controllers or remove it as a dependency as below:
angular.module('boatup', [
'ngRoute'
]);
Replace this with your code.
//in app.js
angular.module('boatup', [
'ngRoute'
]);
//in controllers.js
angular.module('boatup')
.controller('mainCtrl', function($scope) {
console.log("hello");
});
As far as I can see from your description, you've started your project with creating different files with your application's modules. That's a good descision. But!
You instantiated your main app's module and assigned it to global variable app. It's not that big deal, but better avoid creating unnecessary variable in global scope. And if you devine gloabl variable app in different files, it will be owerwritten with the last file loaded.
You must load your module with controllers before main module. Otherwise you'll get [$injector:modulerr].
So in your case the following solution will work.
controllers.js
angular.module('boatup.controllers', [])
.controller('mainCtrl', ['$scope', function($scope) {
console.log('hello');
}])
app.js
angular.module('boatup', ['ngRoute', 'boatup.controllers']);
And you need to load in appropriate order.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="controllers.js"></script>
<script src="app.js"></script>
I've been trying to set up basic AngularJS functionality for a project but have been hitting a brick wall when it comes to including angular-route. Both are version 1.4.8. I'm currently using gulp-require to concatenate my JS, here's my main javascript file
// =require ../components/jquery/dist/jquery.min.js
// =require ../components/angular/angular.js
// =require ../components/angular-route/angular-route.js
$(document).ready(function() {
// =require app/app.js
}); // Doc ready is done!
And my app.js file
var app = angular.module('myApp', ['ngRoute']);
app.controller("ctrl", ["$scope", 'ngRoute', function($scope) {
$scope.test = "It works!";
}]);
I've checked and all the files are concatenating properly. The ng-app and ng-controller attributes are on my HTML file. I've tried adding and removing the ngRoute injection and switching the order of the files but to no avail. It's frustrating since I used Angular 1.4.5 in almost the exact same way without these issues popping up but I can't replicate the same here even when going back. But the {{test}} variable in my HTML is still not rendering, and basic operations like {{2 + 3}} aren't either.
EDIT: here is the link to the original error message I'm currently receiving: http://tinyurl.com/zx3k85f
EDIT 2: The parts of my HTML code that's calling the app and the controller:
<html lang="en" ng-app="myApp">
<body ng-controller="ctrl">
</body>
</html>
I'm using nunjucks for HTML dynamic generation, although I've changed the syntax for this so it doesn't conflict with Angular's double curly braces.
You can't inject module as dependency inside controller, you should remove 'ngRoute' from the controller DI inline array.
app.controller("ctrl", ["$scope", , function($scope) {
Update
Basically the real problem is you are loading your angular component script using requirejs(lazily), so while you are having ng-app="myApp" with module name start looking for myApp module, and the module has not loaded therefore it throws an error .
So I'd recommend you to don't use ng-app directive to start angular on page load. Instead you should wait until all the scripts related to angular loaded, & then to bootstrap angular app lazily using angular.bootstrap method.
Code
$(document).ready(function() {
requirejs(["app/app.js"], function(util) {
angular.bootstrap(document, ['myApp']);
});
});
ngRoute is a provider that needs to be configured in the module config section before being used. Using it within a controller does not make any sense. Here the version that will work:
angular.module('myApp', ['ngRoute']);
angular.module('myApp').controller("ctrl", ["$scope",function($scope) {
$scope.test = "It works!";
}]);
Moreover, you need to call your module using directive ng-app=myapp in the html element where you plan to render your app.
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.