Angular.js and routeprovider tutorial stackskills

Question

I'm currently working through an angular.js tutorial on stackskills but have run into a problem.

It seems as though my use of the routeprovider isn't correct.

Each route is supposed to correlate to a link on a nav bar. However, instead of switching views it always hits the otherwise statement and displays main as opposed to any other view.

When the otherwise statement is removed, none of the views display.

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){
  
}]);

This is the div that houses the nav bar and links for the views

<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>

Any advice would be greatly appreciated!

Answer 1

Turns out my syntax was off "#!/about" is the current method of calling a view