Feature/ui router

bower.json

@@ -22,9 +22,9 @@
   ],
   "dependencies": {
     "angular": "^1.5.7",
-    "angular-route": "^1.5.7",
     "angular-animate": "^1.5.7",
-    "angular-material": "^1.0.9"
+    "angular-material": "^1.0.9",
+    "angular-ui-router": "^0.3.1"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.7"

src/app/404.html

@@ -0,0 +1,2 @@
+<h1>Page Not Found</h1>
+<p>Sorry, but the page you were trying to view does not exist.</p>

src/app/app.js

@@ -13,7 +13,7 @@
 
   angular
     .module('app', [
-      'ngRoute',
+      'ui.router',
       'ngAnimate',
       'ngMaterial'
     ])
@@ -22,26 +22,42 @@
 
   // safe dependency injection
   // this prevents minification issues
-  config.$inject = ['$routeProvider', '$locationProvider'];
-  // run.$inject = [];
+  config.$inject = [
+    '$stateProvider',
+    '$urlRouterProvider',
+    '$locationProvider'
+  ];
 
   /**
    * App routing
    *
    * You can leave it here in the config section or take it out
    * into separate file
    *
+   * @param  {Object} $stateProvider     $stateProvider Angular service
+   * @param  {Object} $urlRouterProvider $urlRouterProvider Angular service
+   * @param  {Object} $locationProvider  $locationProvider Angular service
    */
-  function config($routeProvider, $locationProvider) {
+  function config($stateProvider, $urlRouterProvider, $locationProvider) {
+    $urlRouterProvider.otherwise('/404');
+
     // routes
-    $routeProvider
-      .when('/', {
+    $stateProvider
+      .state('app', {
+        abstract: true,
+        url: '',
+        templateUrl: 'app/main/main.html',
+        controller: 'MainController'
+      })
+      .state('app.home', {
+        url: '/',
         templateUrl: 'app/home/home.html',
         controller: 'HomeController',
         controllerAs: 'homeCtrl'
       })
-      .otherwise({
-        redirectTo: '/404'
+      .state('app.404', {
+        url: '/404',
+        templateUrl: 'app/404.html'
       });
 
     // use the HTML5 History API
@@ -52,6 +68,6 @@
    * Run once the App is ready
    */
   function run() {
-    // console.log('App ready!');
+    console.log('App ready!');
   }
 })();

src/app/home/home.controller.js

@@ -31,6 +31,8 @@
    */
   HomeController.prototype._init = function() {
     this.pageReady = true;
+
+    console.log('Home controller ready!');
   };
 
   HomeController.prototype.next = function(isValid) {

src/app/home/home.html

@@ -96,31 +96,15 @@ <h1 class="md-display-2 product-name">{{homeCtrl.productName}}</h1>
           </input-stars>
 
           <h2 ng-show="homeCtrl.user.title">
-            {{homeCtrl.user.title}}
+            {{homeCtrl.user.title}} {{homeCtrl.user.name}}
           </h2>
-
-          <p>
-            {{homeCtrl.user.review}}
-          </p>
-
-          <md-input-container class="md-block"
-                              flex-gt-sm
-                              ng-hide="!homeCtrl.socialsSelected.length">
-            <h3 class="md-title">Share on:</h3>
-            <div ng-repeat="item in homeCtrl.socialsSelected">
-              <md-button class="md-raised md-primary"
-                         ng-click="homeCtrl.share(item)">
-                Share on {{item}}
-              </md-button>
-            </div>
-          </md-input-container>
         </md-card-content>
 
         <md-card-actions layout="row" layout-align="end center">
           <md-button ng-click="homeCtrl.publish()"
                      tabindex="5"
                      ng-disabled="!form.$valid">
-            Publish
+            Done
           </md-button>
         </md-card-actions>
       </md-card>

src/app/main/main.controller.js

@@ -0,0 +1,5 @@
+angular
+  .module('app')
+  .controller('MainController', function() {
+    console.log('Main controller ready!');
+  });

src/app/main/main.html

@@ -0,0 +1,6 @@
+<page-header></page-header>
+
+<!-- Main view for templates -->
+<div ui-view class="page"></div>
+
+<page-footer></page-footer>

src/index.html

@@ -73,28 +73,24 @@
   <p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->
 
-  <page-header></page-header>
-
-  <!-- Main view for templates -->
-  <div ng-view class="page"></div>
-
-  <page-footer></page-footer>
+  <div ui-view></div>
 
   <!-- build:main(./.tmp) js/main.min.js -->
     <!-- bower:js -->
     <script src="../bower_components/angular/angular.js"></script>
-    <script src="../bower_components/angular-route/angular-route.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.js"></script>
     <script src="../bower_components/angular-aria/angular-aria.js"></script>
     <script src="../bower_components/angular-messages/angular-messages.js"></script>
     <script src="../bower_components/angular-material/angular-material.js"></script>
+    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
     <!-- endbower -->
 
     <script src="app/app.js"></script>
 
     <script src="app/page-header/page-header.directive.js"></script>
     <script src="app/page-footer/page-footer.directive.js"></script>
 
+    <script src="app/main/main.controller.js"></script>
     <script src="app/home/home.controller.js"></script>
 
     <!-- build:templates -->