CODEWITHSUNDEEP
angularjsngrouteangularjs-ng-route
larry8989
larry8989

Reputation: 339

How to ngRoute between two pages

Trying to use ngRoute to route between two pages, main.html and second.html. Using angular version 1.7. The index.html default to the correct main.html but will not route to second.html when clicking the link titled Second. This is the page I'm trying to do this on.

This is the code in the app.js file.

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) {

}]);

The html has these divs.

<div class="container">

    <div ng-view></div>

</div>

Upvotes: 0

Views: 74

Answers (1)

larry8989
larry8989

Reputation: 339

I was able to fix the issue changing the href to ng-href inside the header tag and by using a value of #! instead of #. Below is my new nav links inside my header. 

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

I simply replicated what I saw done here.

Upvotes: 0

Related Questions