Angular-Route and the ng-view div hide the page

Question

I'm trying to use angular-route, but when I change the div tag from <div ng-include="'views/main.html'" ng-controller="MainCtrl"></div> to <div ng-view></div> that tag is suddenly empty.

The app.js code I have is:

angular .module('testApp', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateURL:'views/main.html',
                controller: 'MainCtrl'
            })
            .when('/adoption', {
        templateURL: 'views/foo.html',
        controller: 'fooCtrl'
        })
        .otherwise({
        redirectTo: '/'
        });
    });

and the html pages and controllers are made, but pretty much empty, save some placeholder stuff.

I'm not 100% sure how I'm supposed to include the angular-route code, but what I have seems to be working.

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>

Answer 1

you app.js should be like this:

angular .module('testApp', ['ngRoute'])
.config(function ($routeProvider) {
    $routeProvider
        .when('/main', {
            templateURL:'views/main.html',
            controller: 'MainCtrl'
        })
        .when('/adoption', {
    templateURL: 'views/foo.html',
    controller: 'fooCtrl'
    })
    .otherwise({
    redirectTo: '/main'
    });
});