CODEWITHSUNDEEP
javascriptangularjsnode.jsangular-routing
ktbee
ktbee

Reputation: 400

Unable to load ngRoute module

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!

Upvotes: 1

Views: 718

Answers (2)

Tristan
Tristan

Reputation: 3321

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.

Upvotes: 0

Mark E
Mark E

Reputation: 730

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>

Upvotes: 2

Related Questions