Create 404 page. Use ui-sref to generate internal links

SC5 · Jan 14, 2015 · a5f0b9b · a5f0b9b
1 parent eeba73b
commit a5f0b9b
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 10 deletions.
diff --git a/lib/app/js/app.js b/lib/app/js/app.js
@@ -19,7 +19,7 @@ angular.module('sgApp', [
         controller: 'MainCtrl'
       })
       .state('app.index.overview', {
-        url: '/overview',
+        url: '/',
         templateUrl: 'overview.html',
         controller: function($rootScope, Styleguide) {
           $rootScope.currentSection = 'overview';
@@ -39,7 +39,7 @@ angular.module('sgApp', [
         }
       })
       .state('app.index.section', {
-        url: '/:section',
+        url: '/section/:section',
         templateUrl: 'views/sections.html',
         controller: 'SectionsCtrl',
         resolve: {
@@ -63,7 +63,7 @@ angular.module('sgApp', [
         }
       })
       .state('app.fullscreen', {
-        url: '/:section/fullscreen',
+        url: '/section/:section/fullscreen',
         templateUrl: 'views/element-fullscreen.html',
         controller: 'ElementCtrl',
         resolve: {
@@ -73,6 +73,9 @@ angular.module('sgApp', [
             }
           }
         }
+      }).state('app.index.404', {
+        url: '/:all',
+        templateUrl: 'views/404.html'
       });
 
     $locationProvider.html5Mode(true);

diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
@@ -35,7 +35,7 @@ angular.module('sgApp')
     // Change route to /all when searching
     $scope.$watch('search.$', function(newVal) {
       if (newVal && newVal.length > 0) {
-        $location.url('all');
+        $state.go('app.index.section', {section: 'all'});
       }
     });
 

diff --git a/lib/app/views/404.html b/lib/app/views/404.html
@@ -0,0 +1 @@
+<p class="sg">Page not found</p>
diff --git a/lib/app/views/main.html b/lib/app/views/main.html
@@ -35,22 +35,22 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
         <a class="sg"
           ng-class="currentSection === 'overview' ? 'active' : ''"
           ng-click="clearSearch()"
-          href="overview">
+          ui-sref="app.index.overview">
           Overview
         </a>
       </li>
       <li ng-repeat="section in sections.data | filter: filterMainSections">
         <a class="sg"
           ng-class="$root.currentSection === section.reference ? 'active' : ''"
           ng-click="clearSearch()"
-          href="{{ section.reference }}">
+          ui-sref="app.index.section({section: {{section.reference}}})">
           {{ section.reference }} {{ section.header }}
         </a>
       </li>
       <li>
         <a class="sg"
           ng-class="currentSection === 'all' ? 'active' : ''"
-          href="all">
+          ui-sref="app.index.section({section: 'all'})">
           Show all sections
         </a>
       </li>

diff --git a/lib/app/views/partials/section.html b/lib/app/views/partials/section.html
@@ -1,7 +1,7 @@
 <section class="sg section"
   ng-class="{active: isActive(section), main: isEmptyMainSection(section)}">
   <header class="sg section-header">
-    <a ng-href="{{section.reference}}">
+    <a ui-sref="app.index.section({section: '{{section.reference}}'})">
       <i class="fa fa-link"></i>
       <h1 class="sg">
         <span class="reference-number">{{ section.reference }}</span>
@@ -21,7 +21,7 @@ <h1 class="sg">
   <div ng-repeat-start="mod in section.modifiers"></div>
   <div class="sg section-partial">
     <div class="sg label">
-      <a ng-href="{{section.reference}}-{{mod.id}}/fullscreen" target="_blank">
+      <a ui-sref="app.fullscreen({section: '{{section.reference}}-{{mod.id}}'})" target="_blank">
         <span class="sg name" ng-bind-html="mod.name | unsafe"></span><i class="fa fa-arrows-alt"></i>
       </a>
     </div>
@@ -32,7 +32,7 @@ <h1 class="sg">
     class="sg section-partial"
     ng-if="!section.modifiers.length && section.markup">
     <div class="sg label">
-      <a ng-href="{{section.reference}}/fullscreen" target="_blank">
+      <a ui-sref="app.fullscreen({section: '{{section.reference}}'})" target="_blank">
         <i class="fa fa-arrows-alt"></i>
       </a>
     </div>

diff --git a/test/angular/unit/controllers/element.test.js b/test/angular/unit/controllers/element.test.js
@@ -56,8 +56,10 @@ describe('ElementCtrl', function() {
       section: '1.1-1'
     };
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     ctrl = $controller('ElementCtrl', {
       $scope: scope,
       $stateParams: stateParams

diff --git a/test/angular/unit/controllers/main.test.js b/test/angular/unit/controllers/main.test.js
@@ -51,8 +51,10 @@ describe('Controller: MainCtrl', function() {
       Variables: variablesService
     });
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     httpBackend.flush();
     localStorageService.clearAll();
   }));

diff --git a/test/angular/unit/controllers/sections.test.js b/test/angular/unit/controllers/sections.test.js
@@ -49,8 +49,10 @@ describe('SectionsCtrl', function() {
       section: '1.1'
     };
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     ctrl = $controller('SectionsCtrl', {
       $scope: scope,
       $stateParams: stateParams