I get always the following error in angular js when I add ng-app="adminApp" to the body. The error is thrown during auto bootstrap.
Uncaught Error: [$injector:modulerr] Failed to instantiate module adminApp due to:
Error: [$injector:nomod] Module 'adminApp' 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.
If I change it to only ng-app the error won't show up but i can't use ngRoute as it needs the app to be given a name. I read lots of solutions for this problem last 2 days but i found none of them working for me.
I removed everything and still won't work. I left only the ng-app and 3 elements.
index.html:
window.mainmodule = angular.module('adminApp', ['ngRoute','ngMaterial']);
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1" />
</head>
<body ng-app="adminApp">
<div id="loadingscreen">
<div style="left:0;top:0;width:0px;height:20px;background-color:#0000FF;" id="loadingbar"></div>
<div class="center">Loading...</div>
</div>
<script type="text/javascript" src="utils/angular.js"></script>
<script type="text/javascript" src="utils/angular-route.js"></script>
<script type="text/javascript" src="utils/angular-animate.js"></script>
<script type="text/javascript" src="utils/angular-aria.js"></script>
<script type="text/javascript" src="utils/angular-material.js"></script>
<script type="text/javascript" src="utils/require.js" data-main="modules/main"></script>
</body>
</html>
EDIT: I use angular v1.5.0-rc.0.
Codepen: http://codepen.io/anon/pen/pgwZLq
original link
If you are using require.js, you need to programmatically bootstrap your angular application.
//kickoff the app
require(["app", "routes" ], function(){
angular.module('adminApp', ['ngRoute','ngMaterial']);
angular.bootstrap(document, ["adminApp"]);
});
When angular.js is loaded, it traverses the DOM and looks for "ng-app" to start the bootstrapping process. At that point of time your require.js dependency files hasn't been loaded on the page yet. So when angular tries to start the application and looks at your "adminApp", it doesn't exists yet. So, by deferring the bootstrapping, you'll have a chance the load your js files before angular goes out and bootstraps your app.
Remove ng-app tag from html. It will be added during bootstraping.
Related
!!Total beginner here!!
I have run into an error - chrome console gives me an error regarding:
[$injector:modulerr]
The problem is that I have not installed angular-route.min.js which is what you're supposed to do in all angular versions after 1.2. My trouble began when I installed angular-route.min.js, put it in the same file as angular and my HTML files, referenced it in the code with <script src="angular-route.min.js"></script> but nothing happened.
I also put angular.module('app.js', ['ngRoute']); into my js file.
There are no typos in my code, I checked for those. On top of all that the console gives me an error saying angular-route.min.js was not found.
All help welcome, I have spent a long time googling but nothing came of it.
(function () {
'use strict';
angular.module('MSgApp', []);
controller:('MsgController', MsgController);
angular.module('app.js', ['ngRoute']);
MsgController.$inject = ['$scope'];
function MsgController($scope) {
$scope.name = "Chris";
$scope.stateOfBeing = "hungry";
$scope.sayMessage = function () {
return "chris likes to eat cookies";
};
$scope.feedChris = function () {
$scope.stateOfBeing = "fed";
};
}
})();
<!DOCTYPE html>
<html ng-app='DIApp'>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
<title>custom attributes</title>
</head>
<body>
<div ng-app="app.js"></div>
<h1>expressions and interpolation</h1>
<div ng-controller='MsgController'>
{{name}} has a message for you: <br>
{{sayMessage()}}
<div>
<button ng-click="feedChris()">Feed chris</button>
<br>
<img ng-src="D:/stuff/coursera angular/chris_{{stateOfBeing}}.png">
</div>
</div>
</body>
</html>
Errors after unminified both angular and angular-route
As per StackOverflow --> Angular JS Uncaught Error: [$injector:modulerr]:
EDIT: This is what ultimately solved the issue and what Chris B did to make it work :
I have come across another code in the Coursera course and this one seems to be working after putting the three links from the answer by #ulmer-morozov into the head tag instead of referencing files on my pc. I guess that's it,
From Answer of #ulmer-morozov:
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">
From Accepted Answer #Lauri Elias:
Try adding this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
From Answer of #Khanh TO:
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.
I am trying to use the AngularJS-ResponsiveCalendar on my page. Here is the link to the actual control:
https://github.com/twinssbc/AngularJS-ResponsiveCalendar
I have an Index file which contains the following:
<!-- Adding the Angular Javascript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://twinssbc.github.io/AngularJS-ResponsiveCalendar/dist/js/calendar-tpls.js"></script>
<script src="~/Scripts/scheduleController.js"></script>
In the scheduleController.js I have the following:
angular.module('App', ['ui-rCalendar'])
I think the above line causes the issue:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=GCCICR&p1=Error%3A%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381)
I am using angular-filter and angular-animate together, because I need do a group by in ngRepeat, but when I try to run, I am getting a error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=SsrsToolApp&p1=Erro…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.5%2Fangular.min.js%3A37%3A180).
Testing I detected a possible conflict, because when remove ['ngAnimate'], it is working fine.
This is the code example with error:
<!doctype html>
<html ng-app="SsrsToolApp">
<head>
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
ready
<script>
var ssrsApp = angular.module('SsrsToolApp', ['ngAnimate'], ['angular.filter']);
</script>
...
</body>
</html>
I need those modules in my app. What do you think? How can I do to solve this problem?
To inject multiple modules in AngularJS specify them as array elements:
var ssrsApp = angular.module('SsrsToolApp', ['ngAnimate', 'angular.filter']);
The third argument to angular.module is a configuration function. The error you are getting is complaining that you're injecting a string ('angular.filter') rather than a function.
I'm trying to learn Angular and attempting to write my first controller outside of a web-based tutorial. I keep getting the error in the title in the JS console and can't figure out what's going on. The link takes me to a page referencing the need to include ngRoute, which I've done according to the API. Surely I'm missing something but I can't see what it is. Any help would be greatly appreciated, thanks!
index.html
<DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Angular Project</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="FirstController">
Did the controller load?
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})
Your issue is that you forgot to invoke the iife which registers module and controller.
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})();//<-- here
Link (in the error) talks about ngRoute as a hint only for one of the reasons your module might not have been available/instantiated when angular ng-app directive tried to bootstrap it. But in your case it does not even exists due to your failure to invoke the anonymous function as IIFE.
I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>