Why is my Angular.js $routeProvider doing nothing?

Question

I'm learning Angular.js right now by following along with the videos at Egghead.io. I'm at the $routeProvider video, and my app isn't routing at all.

It's ultra basic, here's the script (app.js):

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

// routes
app.config(function ($routeProvider) {
    $routeProvider.when('/pizza', { template: 'Yum!!' });
});

app.controller('FirstCtrl', function ($scope) {
    $scope.data = { message: "Hello" };
});

And the html:

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
    {{data.message + " world"}}
    </div>
</div>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.min.js"></script>
<script src="app.js"></script>

From my understanding, http://host/#/pizza should simply show "Yum!!" since I'm passing a string in the template. It doesn't appear to do anything though, I still get "Hello world" as evaluated by the FirstCtrl.

Why isn't the $routeProvider doing anything in my app?

Answer 1

You need to put an ng-view element in where you want the routeProvider to stick the page's template.

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        {{data.message + " world"}}
        <ng-view></ng-view>
    </div>
</div>