I'm working on a Node.js project that uses Angular, and I'm trying to implement multiple views and routing. I've followed the instructions outlined here for installing the angular-route.js file and dependent module:
https://docs.angularjs.org/api/ngRoute
But I still get this error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module blogApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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.
http://errors.angularjs.org/1.3.20/$injector/nomod?p0=ngRoute
Here are the parts that seem relevant from my controller and HTML files:
app.js
var blogApp = angular.module('blogApp', ['ngRoute']);
index.html
<!DOCTYPE html>
<html ng-app="blogApp">
<head>
<title>Blog Posts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="stylesheets/style.css" rel="stylesheet" media="screen">
</head>
<body ng-controller="postController">
// page content
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
</body>
</html>
I'm new to working with Angular and Node, so any thoughts on this greatly appreciated!
It's just a typo (missing equal sign). This line:
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
Should be:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
There is a very small typo in the script include for ngRoute. You had src"https:// rather than src="https://
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
You can debug these kinds of issues by checking the developer tools and making sure the script is loaded without error.
Related
I have an index.ejs page that has a slideMenu which inserts other HTML views in the index.ejs page.
Each html view has its own controller. Each controller is in its own .js file. I am including all these scripts in the index.ejs file, however this causes the following problem and the HTML views don't load properly.
<!DOCTYPE html>
<html ng-app="myapp" xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body layout="column">
<!-- ANGULAR MATERIAL DEPENDENCIES -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- ANGULAR MATERIAL DEPENDENCIES END-->
<md-content>
<div ng-include="'/html/newCode/addCircleTimeSong.html'"></div>
</md-content>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="javascripts/newCode/Controller_CircleTimeSongPage.js"></script>
<script src="javascripts/newCode/Controller_ObservationPage.js"></script>
<script src="javascripts/newCode/Controller_CircleTimeActivityPage.js"></script>
</body>
</html>
I get the following error:
Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=CircleTimeSongPageController&p1=not%20aNaNunction%2C%20got%20undefined
If you have written this statement
var mainApp = angular.module("myapp", ['ngMaterial']);
in all the controller files. This is what causing this error. This statement creates and initializes the myapp module. So if you use this statement in all the controller files, you will be reinitializing the myApp every time hence the angular error.
Replace it with this statement in other controller files
var mainApp = angular.module("myapp");
The above statement means fetch/reference already created/initialized myapp module.
I am having a problem with implementing Highcharts in my Angular/Node/Express app. Using the highcharts-ng directive https://github.com/pablojim/highcharts-ng
I keep getting the following error in my console:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=stocksApp&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A20%3A390)
I have this in the head of my index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--link custom CSS file -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/app.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
My template file:
<div class="container">
<highchart id="chart1" config="chartConfig"></highchart>
</div>
My Angular JS config:
angular.module("stocksApp", ['ngRoute', 'highcharts-ng'])
.config(function($routeProvider){
$routeProvider
.when("/", {
templateUrl: "stocks.html",
controller: "mainController",
});
})
Can anyone help me what this error is about?
I presume that you have installed the highcharts-ng.js from the Node and it seems you have not included the same in your <script> block. You can find it under your node_modules directory.
Also as Steve Pitis pointed out, You need move your <script src="https://code.highcharts.com/highcharts.js"></script> before your app.js script inclusion.
Hope this helps!
I'm new to AngularJS. Although it is a simple problem, I have found similar error but cause was different.
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.
I have index.html file:
<html ng-app="myApp">
<head>
<title>Module example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="app.js" type="text/javascript"/>
</head>
<body>
2 + 2 = {{2 + 2}}
</body>
my app.js file is:
angular.module('myApp', []);
All files were loaded:
Could you help me guys to resolve this simple issue.
Change
<script src="app.js" type="text/javascript"/>
to:
<script src="app.js" type="text/javascript"></script>
your tag script is not closed right, it must be:
<script src="app.js" type="text/javascript"></script>
Guy, you have forgotten to close your script tag ! And your html tag ! And your doctype !
Try :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Module example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
2 + 2 = {{2 + 2}}
</body>
</html>
And it will works ...
Take a look at https://validator.w3.org before asking here, please.
I've being developing angularjs for the last months and I have an app with some controllers, directives and services. Until now all have gone all right, but with the last controller I'm getting a weird error that it's making me go mad. Because the app its a bigger enough to put here all code I will put the important parts.
In my index.html
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="encoding">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" href="lib/ionic/css/ionic.css">
<link rel="stylesheet" href="css/style.css">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-translate/angular-translate.min.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!--<script src=""-->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--SERVICES-->
<script src="js/services/services.js"></script>
<script src="js/services/s_configDB.js"></script>
<script src="js/services/s_clinicDB.js"></script>
<!-- CONTROLLERS -->
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/c_splash.js"></script>
<script src="js/controllers/c_communications.js"></script>
<!--<script src="js/controllers/c_communicationsB.js"></script>
<script src="js/controllers/c_clock.js"></script>
<script src="js/controllers/c_menu.js"></script>
<script src="js/controllers/c_language.js"></script>
<!--DIRECTIVES-->
<script src="js/directives/directives.js"></script>
<script src="js/directives/d_menu.js"></script>
</head>
<body ng-controller="AppComms">
<ion-nav-view ></ion-nav-view>
</body>
</html>
At my app.js:
var SDv4 = angular.module('my_app', [
'ionic',
'my_app.services',
'my_app.controllers',
'my_app.directives'
]);
At controllers.js
var app = angular.module('my_app.controllers',[
//'ionic',
'my_app.c_splash',
'my_app.c_clock',
'my_app.c_language',
'my_app.c_comms',
//'my_app.c_commsb',
'pascalprecht.translate',
'my_app.c_menu'
]);
And for example the c_communications.js
var comms = angular.module('my_app.c_comms',[])
comms.controller('AppComms',['$scope',function($scope){
…
}])
This code is working ok, but if I add another controller (c_communicationsB.js) :
var commsb = angular.module('my_app.c_commsb',[])
and add the my_app.commsb to the controllers.js
It gives me the error:
ionic.bundle.js:8895 Uncaught Error: [$injector:modulerr] Failed to instantiate module MY_APP due to:
Error: [$injector:modulerr] Failed to instantiate module my_app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module my_app.c_commsb due to:
Error: [$injector:nomod] Module ‘my_app.c_commsb' 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.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=MY_APP.c_commsb
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10785:17
at ensure (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10709:38)
at module (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10783:14)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13189:22
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP.c_commsb&…3A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13212:15
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP.controlle…3A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13212:15
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at createInjector (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13099:11)
at doBootstrap (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10457:20)
at bootstrap (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10478:12)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP&p1=Error%…A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A10478%3A12)
What is happening here?!
you have commented out the line <!--<script src="js/controllers/c_communicationsB.js"></script>
in your code sample, but have said that the method is in here.
It seems like your app is not getting called. Try wrapping your app in an IFFY.
(function () {
var comms = angular.module('my_app.c_comms',[]);
comms.controller('AppComms',['$scope',function($scope){
//controller magic here
}])
}());
This is a self calling function so your app will get called by itself.
//At controllers.js
angular.module('my_app',[
//'ionic',
'my_app.c_splash',
'my_app.c_clock',
'my_app.c_language',
'my_app.c_comms',
//'my_app.c_commsb',
'pascalprecht.translate',
'my_app.c_menu'
]);
Solved,
a week ago I used a script to prevent loading page from cache in browser in order to no need to refresh the site when i was debugging on chrome and force always to read from source.
I don't know who or why it was preventing of loading new controllers or new css in a new html page I've added, this is what has made me think about this script.
i am trying to include boostrap.min.js for my hosting server but it gives me
Unexpected token <... but when i use bootstrap CDN it worked. I thought this wasn't going to trouble me any further until i started using Angular-Chart.js. I get the same issue again.
Ok here my include structure:
<link href="app/views/css/bootstrap.min.css" rel="stylesheet">
<link href="app/views/css/myStyle.css" rel="stylesheet">
<link href="app/views/css/angular-chart.css">
<script src="app/views/js/jquery-1.11.3.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- Services -->
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>
<script src="app/services/storyService.js"></script>
<!--Controller -->
<script src="app/controller/mainController.js"></script>
<script src="app/controller/storyCtrl.js"></script>
<script src="app/controller/userCtrl.js"></script>
<!--Directives -->
<script src="app/directives/reverse.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.js"></script>
**Contents**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="app/views/js/angular-chart.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
AngularJs throws that error when you have a missing resources. Check if all your scripts/styles in the head tag are actually found. And check if you have no missing style. Actually i think your third style should be:
<link href="app/views/css/angular-chart.css" rel="stylesheet">
That can probably fix it. I had a script with source "#" and I got that same error. And according to
This link to the issue on Github , installing bower fixes the problem most of the time.
Yeah, this is a typical problem when one of your resources defined in
the index.html file is missing.
If you check the console.log in your server terminal, you might be
able to figure out which one is missing. The missing one should have a
404 status code, while all the other ones are either 200 or 304
(cached).