use ui-sref and ui-sref-active to manage route states

src/about/about.component.js

@@ -0,0 +1,12 @@
+class controller {
+  /*@ngInject*/
+  constructor() {
+    this.title = 'About Us';
+  }
+}
+
+export default {
+  template: require('./about.html'),
+  controllerAs: 'AboutCtrl',
+  controller
+}

src/about/about.html

@@ -0,0 +1,8 @@
+<div class="about">
+  <h1>{{ AboutCtrl.title }}</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto quis asperiores sapiente quisquam pariatur, quam dignissimos neque nemo unde nesciunt illo. Rem maxime, inventore asperiores quia quos nulla. Rerum, cum.</p>
+  <p>Ad eaque, cumque fugiat dolore delectus deserunt officia praesentium sed totam ullam rem explicabo error culpa nihil. Sequi aliquid aperiam totam architecto quae est reiciendis sapiente suscipit consequatur, excepturi id.</p>
+  <p>A perspiciatis fugit quibusdam distinctio facere, harum quae quasi rem sed dolorum nostrum inventore, deserunt doloremque vel et libero unde. Excepturi praesentium debitis repellat nemo, dolore dolorem quisquam autem vero!</p>
+  <p>Dignissimos autem optio quod inventore. Consectetur cupiditate rem eveniet illum optio perferendis corporis iste, repudiandae architecto molestiae voluptatem quibusdam natus laborum mollitia aliquid. Rerum eius maiores vitae tempora voluptatibus reprehenderit.</p>
+  <p>Laudantium non libero ratione corrupti incidunt modi animi sapiente provident laborum debitis. Esse assumenda ut magnam nihil eaque excepturi, nesciunt numquam porro. Fugit illum aspernatur fuga ea ab doloremque atque!</p>
+</div>

src/about/index.js

@@ -0,0 +1,21 @@
+import angular from 'angular';
+import 'angular-ui-router';
+
+import component from './about.component';
+
+import './style.scss';
+
+
+const module = angular.module('about.module', ['ui.router'])
+	.component('about', component)
+	.config(($stateProvider) => {
+		"ngInject";		// ng-annotate doesn't handle arrow functions automatically; need to add the directive prologue.
+		$stateProvider
+			.state('about', {
+				url: '/about',
+				template: '<about></about>'
+			});
+	})
+	.name;
+
+export default module;

src/about/style.scss

@@ -0,0 +1,3 @@
+.about {
+  margin: 20px;
+}

src/app.js

@@ -5,14 +5,15 @@ import 'angular-sanitize';
 
 import Components from './components';
 import Home from './home';
+import About from './about'
 
 import appComponent from './application.component';
 
 import './app.scss';
 
 
 angular
-  .module('synopsis', ['ui.router', 'ngSanitize', Components, Home])
+  .module('synopsis', ['ui.router', 'ngSanitize', Components, Home, About])
   .config(($locationProvider) => {
     "ngInject";   // ng-annotate doesn't handle arrow functions automatically; need to add the directive prologue.
     $locationProvider.html5Mode(true);
@@ -27,4 +28,3 @@ angular
 angular
   .element(document)
   .ready(() => angular.bootstrap(document, ['synopsis']));
-

src/components/navbar/navbar.html

@@ -11,8 +11,8 @@
         </div>
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
-                <li ng-repeat="item in $ctrl.items" ng-class="{ active: item.isActive }">
-                    <a ng-click="$ctrl.onItemClicked(item)" ng-href="{{ item.href }}">{{ item.label }}</a>
+                <li ng-repeat="item in $ctrl.items" ui-sref-active="active">
+                    <a ui-sref="{{ item.href }}">{{ item.label }}</a>
                 </li>
             </ul>
 

src/components/navbar/navbar.js

@@ -6,27 +6,17 @@ class NavBarController {
     this.brand = 'Synopsis';
 
     this.items = [{
-      href: '#',
-      label: 'Home',
-      isActive: true
+      href: 'home',
+      label: 'Home'
     }, {
-      href: '#',
-      label: 'About',
-      isActive: false
+      href: 'about',
+      label: 'About'
     }, {
       href: '#',
-      label: 'Contact',
-      isActive: false
+      label: 'Contact'
     }];
 
   }
-
-  onItemClicked(clickedItem) {
-    this.items = this.items.map((item) => {
-      item.isActive = item.label === clickedItem.label;
-      return item;
-    });
-  }
 }
 
 const Navbar = {

src/components/navbar/navbar.spec.js

@@ -2,7 +2,7 @@ import '../index';  // import the module under test
 
 describe('Navbar Component', () => {
 
-  beforeEach(window.module('components.module')); 
+  beforeEach(window.module('components.module'));
 
   let $componentController;
   beforeEach(window.inject((_$componentController_) => {
@@ -19,17 +19,4 @@ describe('Navbar Component', () => {
     expect(component.items.length).toEqual(3);
   });
 
-
-  describe('#onItemClicked', () => {
-    it('selects the clicked item', () => {
-      let component = $componentController('navbar', null, {});
-
-      var itemToClick = component.items[2];
-      expect(itemToClick.isActive).toBe(false);
-
-      component.onItemClicked(itemToClick);
-      expect(itemToClick.isActive).toBe(true);
-    });
-  });
-
 });