ng-view isn't being populated with the template

Question

Consider this plunker. I think I've set up everything correctly, but my templates aren't getting loaded into the div with the ng-view directive.

My routes are configured:

routes.forEach(function (r) {
    $routeProvider.when(r.url, r.templateUrl);
});
$routeProvider.otherwise({ redirectTo: '/' });

And my routes are:

return [
    {
        url: '/',
        templateUrl: 'main.html'
    }, {
        url: '/games',
        templateUrl: 'games.html'
    }
];

First of all, my navigation doesn't seem to work, but also, even when I'm in the root (when the path is /), my main.html template isn't loaded into the ng-view. Can anyone see what I'm doing wrong exactly?

Answer 1

1. The function definition is:

   when(path, route);
   

   Where route is an object:

   routes.forEach(function (r) {
       $routeProvider.when(r.url, { templateUrl: r.templateUrl });
   });
   

2. Change href to:

   <li><a href="#/">Main</a></li>
   <li><a href="#/games">Games</a></li>