title: AngularJS routes with Express Server
body: <p>I've started with Angular routes and Express together. When i click a route link, url change but nothing happens, Here is my code.When i click on a href , it change my url with something like that "<a href="http://localhost:3000/#!#%2Fhome" rel="nofollow noreferrer">http://localhost:3000/#!#%2Fhome</a>" and nothing happens. i have tried changing the href without the "/" and "#" but nothing changed. </p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
     &lt;base href="/" /&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;title&gt;Squared&lt;/title&gt;
     &lt;link rel="stylesheet" href="/css/skeleton.css"&gt;
     &lt;link rel="stylesheet" href="/css/style.css"&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;div class="app-wrapper" ng-app = "myapp"&gt;
      &lt;div class="row app"&gt;
       &lt;div class="left"&gt;
           &lt;div class="left-search-wrapper"&gt;
             &lt;input type="text" name="search-bar" value="" placeholder="Search"&gt;
           &lt;/div&gt;
          &lt;div class="left-image-wrapper"&gt;
              &lt;img src="images/profilepic.png" class="left-image"&gt;
          &lt;/div&gt;
          &lt;div class="left-menu-wrapper"&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#/messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#/friends"&gt;Friends&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#/settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="columns eight right"&gt;
        &lt;div ng-view&gt;&lt;/div&gt;
  
        &lt;script type="text/ng-template" id= "home.html"&gt;
          &lt;h2&gt;Home&lt;/h2&gt;
        &lt;/script&gt;
        &lt;script type="text/ng-template" id= "messages.html"&gt;
          &lt;h2&gt;messages&lt;/h2&gt;
        &lt;/script&gt;
        &lt;script type="text/ng-template" id= "friends.html"&gt;
          &lt;h2&gt;friends&lt;/h2&gt;
        &lt;/script&gt;
        &lt;script type="text/ng-template" id= "settings.html"&gt;
          &lt;h2&gt;settings&lt;/h2&gt;
        &lt;/script&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
  
  
   &lt;script type="text/javascript" src="node_modules/angular/angular.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this is my app.js</p>
  
  <pre><code>var app = angular.module("myapp", ["ngRoute"]);
  app.config(["$routeProvider", function($routeProvider){
   $routeProvider
     .when("/home", { templateUrl: "home.html"})
     .when("/messages", { templateUrl: "messages.html"})
     .when("/friends", { templateUrl: "friends.html"})
     .when("/settings", { templateUrl: "settings.html"});
   }]);
  </code></pre>
  
  <p>this is my Express server.js</p>
  
  <pre><code>var express = require("express");
  var app = express();
  var path = require("path");
  
  
  app.use(express.static(__dirname));
  
  function routeHandler(app){
    app.get("/", function(req, res){
        res.sendFile(__dirname + "/index.html");
    });
  }
  
  routeHandler(app);
  app.listen(3000);
  </code></pre>
  
  <p>this is my project directory organization:</p>
  
  <ul>
  <li>Root Folder
  
  <ul>
  <li>index.html</li>
  <li>app.js</li>
  <li>server.js</li>
  <li>node_modules</li>
  <li>images</li>
  <li>css</li>
  </ul></li>
  </ul>