title: Use angular routing on Express framework
body: <p>I am new with Angular and Node/Express. Now I've setup a node/express server where I want to use angularjs on. I came as far as loading the main index.jade. I have some hrefs on this page that I want to use angular for to route between these links, but I can't seem to get it working. The console keeps telling me that the page that I'm linking to does not exist.</p>
  
  <p>This is the app.js which is the server in express
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var express = require('express');
  var path = require('path');
  var favicon = require('serve-favicon');
  var logger = require('morgan');
  var cookieParser = require('cookie-parser');
  var bodyParser = require('body-parser');
  
  var index = require('./routes/index');
  var users = require('./routes/users');
  
  var app = express();
  
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'jade');
  
  // uncomment after placing your favicon in /public
  //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
  app.use(logger('dev'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.use('/', index);
  app.use('/users', users);
  
  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
  });
  
  // error handler
  app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
  
    // render the error page
    res.status(err.status || 500);
    res.render('error');
  });
  
  module.exports = app;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the index.js on express
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var express = require('express');
  var router = express.Router();
  
  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
  });
  
  module.exports = router;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the jade file with my layout
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>doctype html
  html(ng-app='myApp')
    head
      title= title
      link(rel='stylesheet', href='/stylesheets/style.css')
      script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js')
      script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js')
      script(src='/javascripts/app.js')
      base(href="/")
    
  body
      block content
  
  div(ng-view)</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the angular routing
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module("myApp", ["ngRoute"]);
  
  app.config(function($routeProvider,$locationProvider) {
          $routeProvider.when('/red', {
              templateUrl: '/views/red.jade'
          }).when('/green', {
              templateUrl: '/views/green.jade'
          }).when('/blue', {
              templateUrl: '/views/blue.jade'
          }).otherwise({
              redirectTo: '/'
          });
          $locationProvider.html5Mode(true);
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the error I get in the console
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>GET http://localhost:3000/views/blue.jade 404 (Not Found)
  (anonymous) @ angular.js:12578
  q @ angular.js:12323
  (anonymous) @ angular.js:12075
  (anonymous) @ angular.js:16843
  $digest @ angular.js:17982
  $apply @ angular.js:18280
  (anonymous) @ angular.js:14250
  hg @ angular.js:3734
  d @ angular.js:3722
  angular.js:14516 Error: [$compile:tpload] http://errors.angularjs.org/1.6.3/$compile/tpload?p0=%2Fviews%2Fblue.jade&amp;p1=404&amp;p2=Not%20Found
      at angular.js:38
      at angular.js:19933
      at angular.js:16843
      at m.$digest (angular.js:17982)
      at m.$apply (angular.js:18280)
      at l (angular.js:12378)
      at XMLHttpRequest.v.onload (angular.js:12532)
  (anonymous) @ angular.js:14516
  (anonymous) @ angular.js:11004
  (anonymous) @ angular.js:19937
  (anonymous) @ angular.js:16843
  $digest @ angular.js:17982
  $apply @ angular.js:18280
  l @ angular.js:12378
  v.onload @ angular.js:12532</code></pre>
  </div>
  </div>
  </p>