Search code examples
javascriptangularjsurl-routingangularjs-routing

AngularJS routing noob

I am trying to build my first AngularJS routing code but I can't seem to get it to work and error console isn't of much help.

My HTML page:

<body ng-app="myApp">
<div ng-controller="AppController">
    <div class="nav">
        <ul>
            <li><a href="#/template1">Template 1</a></li>
            <li><a href="#/template2">Template 2</a></li>
            <li><a href="#/template3">Template 3</a></li>
            <li><a href="#/somepage">SomePage</a></li>
            <li><a href="#/default">Otherwise</a></li>
        </ul>
    </div>
    <div ng-view></div>
</div>
</body>

app.js:

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

myApp.config(function($routeProvider){
    $routeProvider
    .when('/template1', {
        templateUrl:'partials/template_1.html'
    })
    .when('/template2', {
        templateUrl:'partials/template_2.html'
    })
    .when('/template3', {
        templateUrl:'partials/template_3.html'
    })
    .when('/somepage', {
        templateUrl:'partials/somepage.html'
    })
    .otherwise({
        redirectTo:'partials/otherwise.html'
    });
});

Could someone please tell me what I'm doing wrong here?

Solution

  • Upgrade your angular.js version to 1.2.26 which is most stabled Angular Version. Other code looks fine to me.

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

    Thanks.