Enable HTML5 mode

jhoffner · Jan 8, 2015 · d123b92 · d123b92
1 parent 678a630
commit d123b92
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 18 deletions.
diff --git a/app/index.html b/app/index.html
@@ -30,6 +30,8 @@
   <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
   <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
   <!-- END FAVICON -->
+
+  <base href="/" />
 </head>
 
 <body>
@@ -38,7 +40,7 @@
   <!-- bower:js -->
   <script src="../bower_components/jquery/dist/jquery.js"></script>
   <script src="../bower_components/angular/angular.js"></script>
-  <script src="../bower_components/angular-route/angular-route.js"></script>
+  <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
   <script src="../bower_components/bootstrap-sass/dist/js/bootstrap.js"></script>
   <!-- endbower -->
   <!-- endbuild -->

diff --git a/app/scripts/about.controller.js b/app/scripts/about.controller.js
@@ -0,0 +1,12 @@
+'use strict';
+
+angular
+  .module('app')
+  .controller('AboutController', AboutController);
+
+AboutController.$inject = ['$rootScope', '$location'];
+
+function AboutController ($scope, $location)
+{
+
+}
diff --git a/app/scripts/entry.js b/app/scripts/entry.js
@@ -6,7 +6,7 @@ $('body').prepend(require('../views/index.jade')());
 
 var appDependencies = [
   'ng',
-  'ngRoute',
+  'ui.router',
   // Controllers
   'app'
 ];
@@ -15,19 +15,31 @@ angular
   .module('frontendboilerplate', appDependencies)
   .config(appConfig);
 
-appConfig.$nject = ['$routeProvider'];
+appConfig.$nject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
 
-function appConfig ($routeProvider) {
+function appConfig ($stateProvider, $urlRouterProvider, $locationProvider) {
   var routes = [
     {
-      path: '/',
-      template: 'index'
+      name: 'main',
+      path: ''
+    },
+    {
+      name: 'about',
+      path: 'about'
     }
   ];
 
   routes.forEach(function(route){
-    $routeProvider.when(route.path, {template: require('../views/' + route.template + '.jade')()});
+    var template = require('../views/' + route.name + '.jade')();
+
+    $stateProvider.state(route.name, {
+      url: '/' + route.path,
+      views: {
+        guest: { template: template }
+      }
+    });
   });
 
-  $routeProvider.otherwise({redirectTo: '/404'});
-}
+  $urlRouterProvider.otherwise("/404");
+  $locationProvider.html5Mode(true);
+}
diff --git a/app/views/about.jade b/app/views/about.jade
@@ -0,0 +1,2 @@
+div(ng-controller="AboutController")
+  h1.text About page
diff --git a/app/views/index.jade b/app/views/index.jade
@@ -1 +1 @@
-h1.text Oh hey!lo world
+div(ui-view="guest")
diff --git a/app/views/main.jade b/app/views/main.jade
@@ -0,0 +1,2 @@
+h1.text Oh hey!lo world
+a(ui-sref="about") About
diff --git a/bower.json b/bower.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "dependencies": {
     "angular": "^1.3.0",
-    "angular-route": "^1.3.0",
+    "angular-ui-router": "~0.2.13",
     "jquery": "~2.1.3",
     "bootstrap-sass": "~3.0.2"
   }

diff --git a/gulpfile.js b/gulpfile.js
@@ -1,6 +1,7 @@
 'use strict';
 
 var gulp = require('gulp');
+var modRewrite = require('connect-modrewrite');
 
 var $ = require('gulp-load-plugins')({
   pattern: ['gulp-*', 'del', 'browser-sync']
@@ -19,13 +20,15 @@ gulp.task('webpack', function() {
         filename: "app.js"
       }
     }))
-    .pipe(gulp.dest('build/dev/scripts/'));
+    .pipe(gulp.dest('build/dev/scripts/'))
+    .pipe($.browserSync.reload({stream:true}));
 });
 
 // Html
 gulp.task('html', function() {
   return gulp.src('app/index.html')
     .pipe(gulp.dest('build/dev'))
+    .pipe($.browserSync.reload({stream:true}))
 });
 
 // Sass
@@ -47,22 +50,29 @@ gulp.task('images', function () {
       progressive: true,
       interlaced: true
     }))
-    .pipe(gulp.dest('build/dev/images/'));
+    .pipe(gulp.dest('build/dev/images/'))
+    .pipe($.browserSync.reload({stream:true}));
 });
 
 // Static server
 gulp.task('serve:dev', function() {
   $.browserSync({
     server: {
-      baseDir: [".","build/dev"]
+      baseDir: [".","build/dev"],
+      middleware: [
+        modRewrite(['!\\.\\w+$ /index.html [L]'])
+      ]
     }
   });
 });
 
 gulp.task('serve:dist', function() {
   $.browserSync({
     server: {
-      baseDir: ["build/dist"]
+      baseDir: ["build/dist"],
+      middleware: [
+        modRewrite(['!\\.\\w+$ /index.html [L]'])
+      ]
     }
   });
 });
@@ -99,11 +109,10 @@ gulp.task('clean', function () {
 // Default Task (Dev environment)
 gulp.task('default', ['dev', 'serve:dev'], function(callback) {
   // Webpack
-  gulp.watch(['app/scripts/**/*.js', 'app/views/**/*.jade'],
-    ['webpack', $.browserSync.reload]);
+  gulp.watch(['app/scripts/**/*.js', 'app/views/**/*.jade'], ['webpack']);
 
   // Htmls
-  gulp.watch('app/*.html', ['html', $.browserSync.reload]);
+  gulp.watch('app/*.html', ['html']);
 
   // Styles
   gulp.watch('app/styles/**/*.scss', ['sass']);

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "readmeFilename": "README",
   "devDependencies": {
     "browser-sync": "^1.8.3",
+    "connect-modrewrite": "^0.7.9",
     "del": "^1.1.1",
     "gulp": "~3.8.10",
     "gulp-csso": "^0.2.9",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		div(ng-controller="AboutController")
		h1.text About page
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		h1.text Oh hey!lo world
		a(ui-sref="about") About