Reputation: 1

AngularJS : Routing

So I was watching an angular tuto and the guy was explaining the 'ngRoute' and how to use it, using this example :

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'


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

        })

});


myApp.controller('mainController', ['$scope', '$route', function ($scope, $route) {




}])
    .controller('secondController', ['$scope', '$route', function ($scope, $route) {




}]);

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>

<body>
   <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Angular</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#/second">Second</a></li>
          </ul>
        </div>
      </div>
    </nav>

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

    </div> <!-- /container -->



        
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js"></script>
    <script src="app.js"></script>
</body>



</html>

and it worked for him, but for me just the Home link worked while the Second link didn't work until I changed the <a href="#/second">Second</a> to <a href="#!/second">Second</a> and it worked, but I don't understand why ?

Upvotes: 0

Answers (3)

Pradeep Ramadugu

Reputation: 1

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })
        .when('/second', {
            templateUrl: 'pages/second.html',
            controller: 'secondController'
        })
});


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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>

<body>
   <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Angular</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#/second">Second</a></li>
          </ul>
        </div>
      </div>
    </nav>

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

    </div> <!-- /container -->

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js"></script>
    <script src="app.js"></script>
</body>
</html>

Upvotes: 0