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

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

Hide file tree

Showing 6 changed files with 13 additions and 7 deletions.
diff --git a/lib/app/js/app.js b/lib/app/js/app.js
@@ -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/views/main.html b/lib/app/views/main.html
@@ -43,14 +43,14 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
         <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
@@ -58,6 +58,7 @@ describe('ElementCtrl', function() {
 
     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
@@ -53,6 +53,7 @@ describe('Controller: MainCtrl', function() {
 
     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
@@ -51,6 +51,7 @@ describe('SectionsCtrl', function() {
 
     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