Search code examples
angularjsangularjs-ng-route

Angular js ngRoute is not working?

Hi I'm learning angular js. I'm using angular 1.5.6 version. Here is my code 

<!DOCTYPE HTML>
<html ng-app="NoteWrangler">
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>
    <body>
        <script type="text/javascript" src='/NoteWrangler/javascript/vendor/angular.min.js'></script>
        <script type="text/javascript" src='/NoteWrangler/javascript/vendor/angular-route.js'></script>
        <script type="text/javascript" src='/NoteWrangler/javascript/route.js'></script>

        <a href="#/genere">Genere</a>
        <a href="#/instruments">Instruments</a>
        <div ng-view></div>
    </body>
</html>

My javascript file 

angular.module('NoteWrangler',['ngRoute']).config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
    $routeProvider.when('/genere',{
        templateUrl: '/template/genere/index.html'
    })
    .when('/instruments',{
        templateUrl: '/template/instruments/index.html'
    }).otherwise({
        redirectTo: '/template/genere/index.html'
    });
}]);

I'm doing same as they teach in a tutorial, but I'm not able to re route to templateUrl. What i'm doing wrong here? I didn't find any errors in console. I search in every tutorial they do the same. I don't know what i'm doing wrong here. Can some one help me to solve this please?

Solution

  • remove first slash in your templateUrl eg: /template/genere/index.html to template/genere/index.html