How to do routing in angular js?

Question

I am trying to do angular js routing application its works fine but i have facing an error that was i am clicking [View Students List] that is not working and page is not navigating to another page..

below is my code.. main.js

var app = angular.module("mainApp", ['ngRoute']);

app.config(['$routeProvider','$locationProvider',
    function($routeProvider,$locationProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'StudentController'
        })
        .when('/viewStudents', {
            templateUrl: 'viewStudents.html',
            controller: 'StudentController'
        })
        .otherwise({
            redirectTo: '/'
        });
        $locationProvider.hashPrefix('');
        $locationProvider.html5Mode({
            enabled:true,
            requiredBase:false
        }); 
}]);

app.controller('StudentController', function($scope) {
    $scope.students = [
        {name: 'Mark Waugh', city:'New York'},
        {name: 'Steve Jonathan', city:'London'},
        {name: 'John Marcus', city:'Paris'}
    ];

    $scope.message = "Click on the hyper link to view the students list.";
});

below is my home.html

<div class="container">
    <h2> Welcome </h2>
    <p>{{message}}</p>
    <a ng-href="/viewStudents"> View Students List</a>
</div>

below is my viewStudents.html

<div class="container">
    <h2> View Students </h2>
    Search:
    <br/>
        <input type="text" ng-model="name" />
    <br/>
    <ul>
        <li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
    </ul>
    <a ng-href="/home">Back</a>
</div>

below is my index.html code

<!DOCTYPE html>
<html>
    <head>
        <base href="/" />
        <script src="js/angular.min.js"></script>
        <script src="js/angular.route.js"></script>
        <script src="js/main.js"></script>
    </head>
        <body ng-app="mainApp">
            <ng-view></ng-view>
        </body>
</html>

Sajeetharan · Accepted Answer · 2017-06-27 06:47:52Z

1

You need to change the Home.html as,

<div class="container">
    <h2> Welcome </h2>
    <p>{{message}}</p>
    <a ng-href="#/viewStudents"> View Students List</a>  
</div>

DEMO

answered Jun 27, 2017 at 6:47

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

Babu Over a year ago

its working fine. but i have one doubt why you remove $locationProvider.html5Mode({ enabled:true, requiredBase:false }); this code in main.js file @Sajeetharan

Sajeetharan Over a year ago

@VenuChowdary Just for the demo purpose on plunker, you can have it

Sajeetharan Over a year ago

why did you remove answer

mt eee · Accepted Answer · 2017-06-27 06:41:46Z

1

change

<a ng-href="/viewStudents"> View Students List</a>

to

<a ng-href="#/viewStudents"> View Students List</a>

try it

answered Jun 27, 2017 at 6:41

mt eee

9010 bronze badges

Comments

AdityaParab · Accepted Answer · 2017-06-27 06:59:06Z

0

If you want to enable html5 mode, make sure you include your base tag AFTER your scripts are loaded. Like this

<!DOCTYPE html>
<html>
    <head>
        <script src="js/angular.min.js"></script>
        <script src="js/angular.route.js"></script>
        <script src="js/main.js"></script>
        <base href="/" />
    </head>
        <body ng-app="mainApp">
            <ng-view></ng-view>
        </body>
</html>

And it should work fine.

Take a look at working plunk

answered Jun 27, 2017 at 6:59

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to do routing in angular js?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related