Enigma State Enigma State - 4 months ago 22
AngularJS Question

Routing is not working with AngularJS

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..

Answer

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:

  1. Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
  2. Mongoose for Windows
Comments