title: trouble with routing in AngularJS SPA
body: <p>I am a beginner to AngularJS and trying to build my first SPA. I have created the routes for a few pages and specified the links in the nav bar. the index file is </p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="#/"&gt;&lt;img src="images/logo.png" height=30 width=41&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#/"&gt;
                          &lt;span class="glyphicon glyphicon-home"
                           aria-hidden="true"&gt;&lt;/span&gt; Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/aboutus"&gt;
                          &lt;span class="glyphicon glyphicon-info-sign"
                           aria-hidden="true"&gt;&lt;/span&gt; About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#/menu"&gt;
                           &lt;span class="glyphicon glyphicon-list-alt"
                           aria-hidden="true"&gt;&lt;/span&gt; 
                           Menu&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href="#/contactus"&gt;
                       &lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>the routeProvider code is,</p>
  
  <pre><code>angular.module('confusionApp', ['ngRoute'])
  .config(function($routeProvider) {
      $routeProvider
          // route for the contactus page
          .when('/contactus', {
              templateUrl : 'contactus.html',
              controller  : 'ContactController'
          })
          // route for the menu page
          .when('/menu', {
              templateUrl : 'menu.html',
              controller  : 'MenuController'
          })
          // route for the dish details page
          .when('/menu/:id', {
              templateUrl : 'dishdetail.html',
              controller  : 'DishDetailController'
          })
          .otherwise({
              redirectTo: '/menu'
          });
  });
  </code></pre>
  
  <p>I have been loading the preview using gulp. When I load the page and click on the links, I am unable to change the templates on the page. I have tried looking for some answers but could not find one. Could some one help me out with this? And when I click on the links, the URL is being displayed as 
  <a href="https://i.stack.imgur.com/tyY5f.jpg" rel="nofollow noreferrer">But isn't it supposed to be "index.html#/contactus"</a></p>
  
  <p>However, I have tried manually changing the url (index.html#!/menu) and it worked fine. But the problem is that I do not understand why there are !/ in the url. Any help would be appreciated.</p>