--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/components/about/about.component.js	Tue Aug 29 14:36:04 2017 -0400
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2012-2017 Red Hat, Inc.
+ *
+ * Thermostat is distributed under the GNU General Public License,
+ * version 2 or any later version (with a special exception described
+ * below, commonly known as the "Classpath Exception").
+ *
+ * A copy of GNU General Public License (GPL) is included in this
+ * distribution, in the file COPYING.
+ *
+ * Linking Thermostat code with other modules is making a combined work
+ * based on Thermostat.  Thus, the terms and conditions of the GPL
+ * cover the whole combination.
+ *
+ * As a special exception, the copyright holders of Thermostat give you
+ * permission to link this code with independent modules to produce an
+ * executable, regardless of the license terms of these independent
+ * modules, and to copy and distribute the resulting executable under
+ * terms of your choice, provided that you also meet, for each linked
+ * independent module, the terms and conditions of the license of that
+ * module.  An independent module is a module which is not derived from
+ * or based on Thermostat code.  If you modify Thermostat, you may
+ * extend this exception to your version of the software, but you are
+ * not obligated to do so.  If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+import controller from './about.controller.js';
+
+export default angular
+  .module('aboutComponent', [controller])
+  .component('about', {
+    bindings: {
+      username: '<'
+    },
+    controller: 'AboutController',
+    template: require('./about.html')
+  })
+  .name;

--- a/src/app/components/about/about.controller.js	Tue Aug 29 12:23:00 2017 -0400
+++ b/src/app/components/about/about.controller.js	Tue Aug 29 14:36:04 2017 -0400
@@ -28,8 +28,8 @@
 import services from 'shared/services/services.module.js';
 
 class AboutController {
-  constructor ($scope, authService) {
-    $scope.username = authService.username;
+  constructor (authService) {
+    this.username = authService.username;
   }
 }
 

--- a/src/app/components/about/about.controller.spec.js	Tue Aug 29 12:23:00 2017 -0400
+++ b/src/app/components/about/about.controller.spec.js	Tue Aug 29 14:36:04 2017 -0400
@@ -52,8 +52,8 @@
   });
 
   it('should set username from authService', () => {
-    scope.should.have.ownProperty('username');
-    scope.username.should.equal(authSvc.username);
+    ctrl.should.have.ownProperty('username');
+    ctrl.username.should.equal(authSvc.username);
   });
 
 });

--- a/src/app/components/about/about.html	Tue Aug 29 12:23:00 2017 -0400
+++ b/src/app/components/about/about.html	Tue Aug 29 14:36:04 2017 -0400
@@ -14,8 +14,8 @@
           <dd translate>CLIENT_VERSION</dd>
         </dl>
         <p translate>about.DOCUMENTATION</p>
-        <h2 translate>about.ACCOUNT</h2>
-        <p translate="about.ACCOUNT_DETAIL" translate-values="{ username: username }"></p>
+        <h2 ng-if="$ctrl.username" translate>about.ACCOUNT</h2>
+        <p ng-if="$ctrl.username" translate="about.ACCOUNT_DETAIL" translate-values="{ username: $ctrl.username }"></p>
       </div>
     </div>
   </div>

--- a/src/app/components/about/about.module.js	Tue Aug 29 12:23:00 2017 -0400
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,34 +0,0 @@
-/**
- * Copyright 2012-2017 Red Hat, Inc.
- *
- * Thermostat is distributed under the GNU General Public License,
- * version 2 or any later version (with a special exception described
- * below, commonly known as the "Classpath Exception").
- *
- * A copy of GNU General Public License (GPL) is included in this
- * distribution, in the file COPYING.
- *
- * Linking Thermostat code with other modules is making a combined work
- * based on Thermostat.  Thus, the terms and conditions of the GPL
- * cover the whole combination.
- *
- * As a special exception, the copyright holders of Thermostat give you
- * permission to link this code with independent modules to produce an
- * executable, regardless of the license terms of these independent
- * modules, and to copy and distribute the resulting executable under
- * terms of your choice, provided that you also meet, for each linked
- * independent module, the terms and conditions of the license of that
- * module.  An independent module is a module which is not derived from
- * or based on Thermostat code.  If you modify Thermostat, you may
- * extend this exception to your version of the software, but you are
- * not obligated to do so.  If you do not wish to do so, delete this
- * exception statement from your version.
- */
-
-import controller from './about.controller.js';
-
-export default angular
-  .module('aboutModule', [
-    controller
-  ])
-  .name;

--- a/src/app/components/about/about.routing.js	Tue Aug 29 12:23:00 2017 -0400
+++ b/src/app/components/about/about.routing.js	Tue Aug 29 14:36:04 2017 -0400
@@ -30,20 +30,13 @@
 
   $stateProvider.state('about', {
     url: '/about',
-    templateProvider: $q => {
-      'ngInject';
-      return $q(resolve =>
-        require.ensure([], () => resolve(require('./about.html'))
-        )
-      );
-    },
-    controller: 'AboutController as ctrl',
+    component: 'about',
     resolve: {
       loadAbout: ($q, $ocLazyLoad) => {
         'ngInject';
         return $q(resolve => {
-          require.ensure(['./about.module.js'], () => {
-            let module = require('./about.module.js');
+          require.ensure(['./about.component.js'], () => {
+            let module = require('./about.component.js');
             $ocLazyLoad.load({ name: module.default });
             resolve(module);
           });

--- a/src/app/components/about/about.routing.spec.js	Tue Aug 29 12:23:00 2017 -0400
+++ b/src/app/components/about/about.routing.spec.js	Tue Aug 29 14:36:04 2017 -0400
@@ -47,7 +47,7 @@
       stateProvider.state.should.be.calledOnce();
     });
 
-    it('should define a \'about\' state', () => {
+    it('should define an \'about\' state', () => {
       args[0].should.equal('about');
     });
 
@@ -55,23 +55,7 @@
       args[1].url.should.equal('/about');
     });
 
-    it('template provider should return about.html', done => {
-      let providerFn = args[1].templateProvider[1];
-      providerFn.should.be.a.Function();
-      providerFn(q);
-      q.should.be.calledOnce();
-
-      let deferred = q.args[0][0];
-      deferred.should.be.a.Function();
-
-      let resolve = sinon.stub().callsFake(val => {
-        val.should.equal(require('./about.html'));
-        done();
-      });
-      deferred(resolve);
-    });
-
-    it('resolve should load about module', done => {
+    it('resolve should load about component', done => {
       let resolveFn = args[1].resolve.loadAbout[2];
       resolveFn.should.be.a.Function();
       resolveFn(q, ocLazyLoad);
@@ -81,8 +65,8 @@
       deferred.should.be.a.Function();
 
       let resolve = sinon.stub().callsFake(val => {
-        ocLazyLoad.load.should.be.calledWith({ name: require('./about.module.js').default});
-        val.should.equal(require('./about.module.js'));
+        ocLazyLoad.load.should.be.calledWith({ name: require('./about.component.js').default});
+        val.should.equal(require('./about.component.js'));
         done();
       });
       deferred(resolve);