Angular.js和routeprovider教程stackskills

Question

我目前正在使用stackskills上的angular.js教程，但遇到了问题。

好像我对routeprovider的使用不正确。

每条路线都应与导航栏上的链接相关联。但是，它不是切换视图，而是始终触及otherwise语句并显示main而不是任何其他视图。

删除else语句后，不会显示任何视图。

var app = angular.module("computer", ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
  $routeProvider.
    when('/main', {
      templateUrl: 'main.html',
      controller:'MainCtrl'
    }).
    when('/about', {
      templateUrl: 'about.html',
      controller:'MainCtrl'
    }).
    when('/services', {
      templateUrl: 'services.html',
      controller:'ServicesCtrl'
    }).
    when('/contact', {
      templateUrl: 'contact.html',
      controller:'ContactCtrl'
    }).
    otherwise({redirectTo: "/main"})
}])

.controller('MainCtrl', ['$scope', function($scope){

}])

.controller('ServicesCtrl', ['$scope', function($scope){
  
}])

.controller('ContactCtrl', ['$scope', function($scope){
  
}]);

这是包含导航栏和视图链接的div

<div class="container">
      <header class="masthead">
        <h3 class="text-muted">Computer Solutions</h3>
        <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav text-md-center nav-justified w-100">
              <li class="nav-item active">
                <a class="nav-link" href="#/main">Home                                                       <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#/about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#/services">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#/contact">Contact</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      </div>
       <div ng-controller='MainCtrl'>
         <div ng-view></div>
       </div>

任何建议将不胜感激！

Answer 1

结果我的语法关闭“＃！/ about”是当前调用视图的方法