Search code examples
javascriptangularjsangularjs-routing

Routing not working in angular spa


I am trying my hands on angular routing,but its not working and i am also not getting any error in console.Can somebody please guide me what i am doing wrong?

****app.js****

var routingApp = angular.module('routingApp', ['ngRoute']);
routingApp.config(function ($routeProvider)
{
    $routeProvider.when('/', {
        templateUrl: '/views/home.html',
        controller: 'mainController'
    })
    .when('/about', {
        templateUrl: '/views/about.html',
        controller: 'aboutController'
    })
    .when('/contact', {
        templateUrl: '/views/contact.html',
        controller: 'contactController'
    });
});

mainController

routingApp.controller('mainController', function ($scope)
{
    $scope.message = 'Hey its home page';
}
)

;

aboutController

routingApp.controller('aboutController', function ($scope)
{
    $scope.message = 'this app is about routing';
});

index.html

**

 <body ng-controller="mainController">
        <nav class="nav navbar-default">
            <div class="container">
                <div class="navbar-header">
                    Angular JS Routing
                </div>
                <ul class="nav navbar-nav navbar-right">
                <li><a href="/">Home</a></li>
                <li><a href="#/about">About</a></li>
                <li><a href="#/Contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <div id="main">
            <div ng-view></div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="app.js"></script>
        <script src="controller/mainController.js"></script>
        <script src="controller/contactController.js"></script>
        <script src="controller/aboutController.js"></script>

**

Solution

  • There is missing directive ng-app, instead of add ng-controller to body, please add ng-app="routingApp"

    Please alse improve link co contact page, instead of #/Contact, please use #/contact