angularjs - 路由不工作，页面显示空白？

Question

下面的代码，我正在尝试使用路由。尽管 URL 发生了变化，但页面仍然是空白的。控制台也不会抛出任何错误。

html

<div ng-app="myApp">
  <ul>
      <li><a href="#!/">Home</a></li>
      <li><a href="#!/about">AboutUs</a></li>
      <li><a href="#!/contact">Contact</a></li>
      <li><a href="#!/whatwedo">WhatWeDo</a></li>
  </ul>
  <div ng-view></div>
</div>

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

app.config(function($routeProvider){
    $routeProvider
    .when('#!/',{
        templateUrl : 'main.htm'
    })

    .when('#!/about',{
        templateUrl : 'about.htm'
    })

    .when('#!/contact',{
        templateUrl : 'contact.htm'
    })

    .when('#!/whatwedo',{
        templateUrl : 'whatwedo.htm'
    })

});

标签： angularjs

Answer 1

从路由中删除 hash-bangs：

app.config(function($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl : 'main.htm'
    })

    .when('/about',{
        templateUrl : 'about.htm'
    })

    .when('/contact',{
        templateUrl : 'contact.htm'
    })

    .when('/whatwedo',{
        templateUrl : 'whatwedo.htm'
    })

});