爲什麼我的Angular.js $ routeProvider什麼都不做？

Question

我現在通過跟隨Egghead.io上的視頻來學習Angular.js。我在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應該簡單地顯示 「百勝！」因爲我在模板中傳遞了一個字符串。它似乎沒有做任何事情，但我仍然得到「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