Почему мой Angular.js $ routeProvider ничего не делает?

Question

Я изучаю Angular.js прямо сейчас, следуя вместе с видео на Egghead.io. Я нахожусь в the $routeProvider video, и мое приложение не маршрутизируется вообще.

Это ультра основной, вот скрипт (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" }; 
}); 

И 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> 

Из моего понимания, http://host/#/pizza должен просто показать "Yum !!" так как я передаю строку в шаблоне. Кажется, он ничего не делает, хотя я все еще получаю «Hello world», как оценивается FirstCtrl.

Почему не $routeProvider ничего не делает в моем приложении?

Answer 1

Вам нужно установить элемент ng-view, в котором вы хотите, чтобы routeProvider придерживался шаблона страницы.

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

Answer 2

Обратите внимание, что указание на него, как показано ниже, обеспечивает совместимость с кросс-браузером.

<div ng-view> </div> 

или, по этому вопросу:

<ANY ng-view> </ANY> 

Более подробная информация доступна здесь: http://docs.angularjs.org/api/ng.directive:ngView