AngularJs + MVC:如何在共享布局视图中通过点击的链接填充页面视图？

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

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'AboutController'
    })
    .when('/contact', {
      templateUrl: 'contact.html',
      controller: 'ContactController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

<!-- home.html -->
<div ng-controller="HomeController">
  <h1>Welcome to the Home Page</h1>
  <!-- 页面内容 -->
</div>

<!-- about.html -->
<div ng-controller="AboutController">
  <h1>About Us</h1>
  <!-- 页面内容 -->
</div>

<!-- contact.html -->
<div ng-controller="ContactController">
  <h1>Contact Us</h1>
  <!-- 页面内容 -->
</div>

app.controller('HomeController', function($scope) {
  // HomeController的业务逻辑
});

app.controller('AboutController', function($scope) {
  // AboutController的业务逻辑
});

app.controller('ContactController', function($scope) {
  // ContactController的业务逻辑
});

<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>