Enable HTML5 mode for Angular

Note: This is the continuation of Angular App build tutorial. We're building the WooApp front-end in Angular right now.

Connect-Modrewrite

Why enable HTML5 mode

We need to enable HTML5 mode to make the URLs pretty. Right out of the box, Angular gives you a # in the URL. For example, in our app we can see http://localhost:9000/#/ and when we go to a new view it shows http://localhost:9000/#/about. We want to get rid of that. I haven't reconfigured a server after doing this, so seems to work on servers that I use.

Install connect-modrewrite

This is a component that adds functionality to connect/express server. This will allow you to run HTML5 mode in dev and prod.

npm install connect-modrewrite --save

You might need sudo to make this work depending on your NPM install.

Update Gruntfile.js

Let's require connect-modrewrite in the Gruntfile.js.

module.exports = function (grunt) {

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // HTML5 Enabling
  var modRewrite = require('connect-modrewrite');
....

Now add modRewrite rules into the connect:{...} section.

modRewrite(['!\\.html|\\.js|\\.css|\\.png|\\.jpg|\\.eot|\\.otf|\\.svg|\\.ttf|\\.woff$ /index.html [L]']),

Here's a snippet from the section:

// The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          modRewrite([
            '!\\.html|\\.js|\\.css|\\.png|\\.jpg|\\.eot|\\.otf|\\.svg|\\.ttf|\\.woff$ /index.html [L]'
          ]),
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },

Now, let's go to /app/scripts/app.js and edit the .config() section. Let's add $locationProvider and $locationProvider.html5Mode(true).hashPrefix('!'); enabling html5 Mode.

.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl',
  })
  .state('about', {
    url: '/about',
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl',
  });

     $locationProvider.html5Mode(true).hashPrefix('!');
});

Time to add the base and head to the index.html in /app and right at the end of the <head> add <base href="/">.

<head>
   .....
   <base href="/">
</head>

Last but not least, let's update the links in the topbar. Still in index.html find the links for the topbar and remove the # from the link.

<ul class="nav navbar-nav">
   <li class="active"><a href="/">Home</a></li>
   <li><a ng-href="/about">About</a></li>
   <li><a ng-href="/">Contact</a></li>
</ul>

Now start the app grunt serve! That's it! Now you have pretty URLs.

Checkout the Repo for the code.