chore(main): use component in templates/client/app/main

Author: Marco Chávez

app/templates/client/app/main/main(html).html

@@ -10,18 +10,18 @@ <h1>'Allo, 'Allo!</h1>
   <div class="row">
     <div class="col-lg-12">
       <h1 class="page-header">Features:</h1>
-      <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in main.awesomeThings">
-        <li><a href="#" uib-tooltip="{{thing.info}}">{{thing.name}}<% if (filters.socketio) { %><button type="button" class="close" ng-click="main.deleteThing(thing)">&times;</button><% } %></a></li>
+      <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in $ctrl.awesomeThings">
+        <li><a href="#" uib-tooltip="{{thing.info}}">{{thing.name}}<% if (filters.socketio) { %><button type="button" class="close" ng-click="$ctrl.deleteThing(thing)">&times;</button><% } %></a></li>
       </ul>
     </div>
   </div><% if (filters.socketio) { %>
 
   <form class="thing-form">
     <label>Syncs in realtime across clients</label>
     <p class="input-group">
-      <input type="text" class="form-control" placeholder="Add a new thing here." ng-model="main.newThing">
+      <input type="text" class="form-control" placeholder="Add a new thing here." ng-model="$ctrl.newThing">
       <span class="input-group-btn">
-        <button type="submit" class="btn btn-primary" ng-click="main.addThing()">Add New</button>
+        <button type="submit" class="btn btn-primary" ng-click="$ctrl.addThing()">Add New</button>
       </span>
     </p>
   </form><% } %>

app/templates/client/app/main/main(jade).jade

@@ -8,15 +8,15 @@ header#banner.hero-unit
   .row
     .col-lg-12
       h1.page-header Features:
-      ul.nav.nav-tabs.nav-stacked.col-md-4.col-lg-4.col-sm-6(ng-repeat='thing in main.awesomeThings')
+      ul.nav.nav-tabs.nav-stacked.col-md-4.col-lg-4.col-sm-6(ng-repeat='thing in $ctrl.awesomeThings')
         li
           a(href='#', uib-tooltip='{{thing.info}}')
             | {{thing.name}}<% if (filters.socketio) { %>
-            button.close(type='button', ng-click='main.deleteThing(thing)') &times;<% } %><% if (filters.socketio) { %>
+            button.close(type='button', ng-click='$ctrl.deleteThing(thing)') &times;<% } %><% if (filters.socketio) { %>
 
   form.thing-form
     label Syncs in realtime across clients
     p.input-group
-      input.form-control(type='text', placeholder='Add a new thing here.', ng-model='main.newThing')
+      input.form-control(type='text', placeholder='Add a new thing here.', ng-model='$ctrl.newThing')
       span.input-group-btn
-        button.btn.btn-primary(type='submit', ng-click='main.addThing()') Add New<% } %>
+        button.btn.btn-primary(type='submit', ng-click='$ctrl.addThing()') Add New<% } %>

app/templates/client/app/main/main.controller.js

@@ -5,17 +5,20 @@
 class MainController {
 
   constructor($http<% if (filters.socketio) { %>, $scope, socket<% } %>) {
-    this.$http = $http;
-    this.awesomeThings = [];
-
-    $http.get('/api/things').then(response => {
-      this.awesomeThings = response.data;<% if (filters.socketio) { %>
-      socket.syncUpdates('thing', this.awesomeThings);<% } %>
-    });<% if (filters.socketio) { %>
+    this.$http = $http;<% if (filters.socketio) { %>
+    this.socket = socket;<% } %>
+    this.awesomeThings = [];<% if (filters.socketio) { %>
 
     $scope.$on('$destroy', function() {
       socket.unsyncUpdates('thing');
     });<% } %>
+  }
+
+  $onInit() {
+    this.$http.get('/api/things').then(response => {
+      this.awesomeThings = response.data;<% if (filters.socketio) { %>
+      this.socket.syncUpdates('thing', this.awesomeThings);<% } %>
+    });
   }<% if (filters.models) { %>
 
   addThing() {
@@ -31,6 +34,9 @@ class MainController {
 }
 
 angular.module('<%= scriptAppName %>')
-  .controller('MainController', MainController);
+  .component('main', {
+    templateUrl: 'app/main/main.html',
+    controller: MainController
+  });
 
 })();

app/templates/client/app/main/main.controller.spec.js

@@ -1,33 +1,36 @@
 'use strict';
 
-describe('Controller: MainController', function() {
+describe('Component: mainComponent', function() {
 
   // load the controller's module
   beforeEach(module('<%= scriptAppName %>'));<% if (filters.uirouter) {%>
   beforeEach(module('stateMock'));<% } %><% if (filters.socketio) {%>
   beforeEach(module('socketMock'));<% } %>
 
   var scope;
-  var MainController;<% if (filters.uirouter) {%>
+  var mainComponent;<% if (filters.uirouter) {%>
   var state;<% } %>
   var $httpBackend;
 
   // Initialize the controller and a mock scope
-  beforeEach(inject(function(_$httpBackend_, $controller, $rootScope<% if (filters.uirouter) {%>, $state<% } %>) {
+  beforeEach(inject(function(_$httpBackend_, $http, $componentController, $rootScope<% if (filters.uirouter) {%>, $state<% } %><% if (filters.socketio) {%>, socket<% } %>) {
     $httpBackend = _$httpBackend_;
     $httpBackend.expectGET('/api/things')
       .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']);
 
     scope = $rootScope.$new();<% if (filters.uirouter) {%>
     state = $state;<% } %>
-    MainController = $controller('MainController', {
-      $scope: scope
+    mainComponent = $componentController('main', {
+      $http: $http,
+      $scope: scope<% if (filters.socketio) {%>,
+      socket: socket<% } %>
     });
   }));
 
   it('should attach a list of things to the controller', function() {
+    mainComponent.$onInit();
     $httpBackend.flush();<% if (filters.jasmine) { %>
-    expect(MainController.awesomeThings.length).toBe(4);<% } if (filters.mocha) { %>
-    <%= expect() %>MainController.awesomeThings.length<%= to() %>.equal(4);<% } %>
+    expect(mainComponent.awesomeThings.length).toBe(4);<% } if (filters.mocha) { %>
+    <%= expect() %>mainComponent.awesomeThings.length<%= to() %>.equal(4);<% } %>
   });
 });

app/templates/client/app/main/main.js

@@ -4,16 +4,12 @@ angular.module('<%= scriptAppName %>')
   <% if (filters.ngroute) { %>.config(function($routeProvider) {
     $routeProvider
       .when('/', {
-        templateUrl: 'app/main/main.html',
-        controller: 'MainController',
-        controllerAs: 'main'
+        template: '<main></main>'
       });
   });<% } %><% if (filters.uirouter) { %>.config(function($stateProvider) {
     $stateProvider
       .state('main', {
         url: '/',
-        templateUrl: 'app/main/main.html',
-        controller: 'MainController',
-        controllerAs: 'main'
+        template: '<main></main>'
       });
   });<% } %>