title: Angular Route - Extra # in URL
body: <p>Learning some Angular - and I'm stuck on routing</p>
  
  <p>Here is my angular config</p>
  
  <pre><code>var meanApp = angular.module('carz', ['ngRoute']);
  
  
  meanApp.config(function($routeProvider) {
      $routeProvider
          .when('/', {
              templateUrl: 'home.html',
              controller: 'mainCtrl'
          })
          .when('/red', {
              templateUrl: 'red.html',
              controller: 'redCtrl'
          });
  });
  </code></pre>
  
  <p>Here is are my links</p>
  
  <pre><code>&lt;a href="#"&gt;Home&lt;/a&gt;
  &lt;a href="#red"&gt;Red&lt;/a&gt;
  </code></pre>
  
  <p>When I load up my node app I am directed to </p>
  
  <pre><code>http://localhost:8080/#!/
  </code></pre>
  
  <p>And I get my angular controller working as expected within the <code>ng-view</code> tags</p>
  
  <p>But I cannot switch from one controller to the other using the links above.</p>
  
  <p><strong>If I select the red tag my URL adds an extra # becoming</strong></p>
  
  <pre><code>http://localhost:8080/#!/#red
  </code></pre>
  
  <p>Note if I manually change to </p>
  
  <pre><code>http://localhost:8080/#!/red
  </code></pre>
  
  <p>My controller changes and it works so why am I getting the extra #</p>
  
  <p>Thanks for any help</p>