title: Routing using AngularJS
body: <p>I have the following HTML page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"&gt;&lt;/script&gt;
  
  &lt;body ng-app="myApp"&gt;
  
  &lt;p&gt;&lt;a href="/"&gt;Main&lt;/a&gt;&lt;/p&gt;
  
  &lt;a href="first"&gt;City 1&lt;/a&gt;
  &lt;a href="#first"&gt;City 1a&lt;/a&gt;
  
  &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;script&gt;
  var app = angular.module("myApp", ["ngRoute"]);
  app.config(function($routeProvider) {
      $routeProvider
      .when("/first", {
          templateUrl : "first.html"
      })
      .when("/first", {
          templateUrl : "first.html"
      });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then there is a simple first.html page. 
  Now, my <code>City1a</code> link works and angularJS loads properly the page into <code>&lt;div ng-view&gt;&lt;/div&gt;</code>. Instead, <code>city1</code> link does not work and I have a 404 error. </p>
  
  <p>When one clicks on <code>City1a</code> my URL is <code>http://localhost/myproject/index.html#/first</code>. What can I do to turn the URL in <code>http://localhost/myproject/first</code>?</p>