Routing is not working with AngularJS

Question

As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..

When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...

I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'

Below is my controller code

var myApp = angular.module('myApp', ['ngRoute']);   
   myApp.config(function ($routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: 'Pages/main.html',
        controller: 'mainController'
    })

    .when('/second', {
        templateUrl: 'Pages/second.html',
        controller: 'secondController'
    })
   });

   myApp.controller('mainController', ['$scope','$log', function($scope,$log) {   
}]);
    myApp.controller('secondController', ['$scope','$log', function($scope,$log) {   
}]);

and html code goes here

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
        <title>Learn and Understand AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="#/second"><i></i>second</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">
        <div ng-view></div>
        </div>

    </body>
</html>

and for main.html

   <h1>this is main page</h1>

and for second.html

    <h1>this is second page</h1>

Would any one please help on this query,

many thanks in advance..

Try removing the / in <li><a href="#/second"><i></i>second</a></li> so it would look like: <li><a href="#second"><i></i>second</a></li>. — FDavidov
– FDavidov, Commented Aug 2, 2016 at 7:31
You've declared the controller twice too, assume that's a typo though. — rrd
– rrd, Commented Aug 2, 2016 at 7:36

Shashank Agrawal · Accepted Answer · 2016-08-02 08:04:43Z

1

Things seem to be working fine for me. See the working example below:

(Just change the href of Home link to #/)

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {

  $routeProvider
    .when('/', {
      templateUrl: 'Pages/main.html',
      controller: 'mainController'
    })

  .when('/second', {
    templateUrl: 'Pages/second.html',
    controller: 'secondController'
  })
});

myApp.controller('mainController', ['$scope', '$log',
  function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
  function($scope, $log) {}
]);

html,
body,
input,
select,
textarea {
  font-size: 1.05em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">AngularJS</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
          <li><a href="#/"><i class="fa fa-home"></i>Home</a>
          </li>
          <li><a href="#/second"><i></i>second</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <div class="container">
    <div ng-view></div>
  </div>

  <script id="Pages/main.html" type="text/ng-template">
    <h1>this is main page</h1>
  </script>

  <script id="Pages/second.html" type="text/ng-template">
    <h1>this is second page</h1>
  </script>
</div>

Edit

Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:

Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows

edited Aug 2, 2016 at 8:04

answered Aug 2, 2016 at 7:54

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Glory Raj Over a year ago

I am getting this error 'Cross origin requests are only supported for protocol schemes: http, data, chrome, '

Shashank Agrawal Over a year ago

Are you directly browsing your HTML pages by double-clicking your page i.e. which starts with file:///?

Shashank Agrawal Over a year ago

If yes, then on Linux based platforms, use a comment python -m SimpleHTTPServer in your project directory and browse to localhost:8000

Glory Raj Over a year ago

I am using windows platform ..in that case also do i need to follow above step

Shashank Agrawal Over a year ago

Then use mongoose to serve your static files. It is a lightweight HTTP server. Angular will not able to run if you directly browse the files.

|

Mridul Kashyap · Accepted Answer · 2016-08-02 07:34:35Z

1

replace:

<li><a href="#"><i class="fa fa-home"></i>Home</a></li>

with

<li><a href="#/"><i class="fa fa-home"></i>Home</a></li>

and it should work fine. i checked.

That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?

you could try to download the angular-route file and reference in your html and see if it works.

answered Aug 2, 2016 at 7:34

Mridul Kashyap

7001 gold badge5 silver badges12 bronze badges

Collectives™ on Stack Overflow

Routing is not working with AngularJS

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related