为什么我的Angular.js $ routeProvider什么都不做？

Question

我正在通过跟随Egghead.io的视频来学习Angular.js.我在$ routeProvider视频,我的应用程序根本没有路由.

这是超基本的,这是脚本(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应该只显示"百胜!!" 因为我在模板中传递了一个字符串.它似乎没有做任何事情,我仍然得到"你好世界"的评价FirstCtrl.

为什么不在$routeProvider我的应用程序中做任何事情？

Answer 1

您需要将一个ng-view元素放在您希望routeProvider粘贴页面模板的位置.

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