title: How to make Angularjs route work with expressJs route on html5mode
body: <p>i have posted a question on stackoverflow (<a href="https://stackoverflow.com/questions/19561271/css-and-javascript-didnt-include-on-refresh/19561604?noredirect=1#comment29033072_19561604">css and javascript didn&#39;t include on refresh</a>) yesterday asking the question about why the css and javascript didn't include on my webpage after I refresh the webpage and found out it caused by the html5mode, so i have been searching the solution for this problem since yesterday but I can't really get an answer.</p>
  
  <p><strong>my folder structure</strong> </p>
  
  <p><img src="https://i.stack.imgur.com/blswf.jpg" alt="enter image description here"></p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var express = require('express')
    , routes = require('./routes')
    , user = require('./routes/user')
    , http = require('http')
    , path = require('path')
    , mongoose = require('mongoose');
  
  var app = module.exports=express();
  // all environments
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/public/views');
  app.set('view engine', 'ejs');
  app.use(express.cookieParser());
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.static(path.join(__dirname, 'public')));
  app.use(app.router);
  app.use(function(request, response)
  {
      console.log("catch all");
      writeFile("/public/views/master.ejs", request, response);
  });
  // development only
  if ('development' == app.get('env')) {
    app.use(express.errorHandler());
  }
  app.use(function (req,res) {
   res.status(404).render('error', {
                  url: req.originalUrl
              });
  });
  
  app.get('/', routes.index);
  app.get('/:name', routes.view);
  app.get('*', routes.risk);
  
  http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
  });
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>exports.index = function(req, res){
    res.render('master', { title: 'Hello World' });
  };
  exports.view = function (req, res) {
    var name = req.params.name;
    res.render(name);
  };
  exports.risk = function(req, res){
    res.sendfile(__dirname + "/public/views/master.ejs");
  };
  </code></pre>
  
  <blockquote>
    <p>for the exports.risk i was trying to make the expressJs to render the master page 1st before it renders other but it doesn't work.</p>
  </blockquote>
  
  <p><strong>angularJs</strong></p>
  
  <pre><code>var SymSal = angular.module('SymSal',[]).
   config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
      $routeProvider.
        when('/', {
          templateUrl: 'main.ejs',
          controller: 'IndexCtrl'
        }).
        when('/login',{
          templateUrl: 'login.ejs',
          controller: 'IndexCtrl'
        }).
        when('/register',{
          templateUrl: 'register.ejs',
          controller: 'IndexCtrl'
        }).
        when('/about',{
          templateUrl: 'about.ejs',
          controller: 'IndexCtrl'
        }).
        otherwise({
          templateUrl: 'error.ejs'
  
        });
      $locationProvider.html5Mode(true);
    }]);
  
   SymSal.controller('IndexCtrl',function(){
  
   })
  </code></pre>
  
  <p>Your help is appreciated, THANK YOU !!</p>