Merge pull request angular-fullstack#1243 from DaftMonk/angular-controller-as

refactor(client:main): use controller as, named function, new name

Author: kingcody

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

@@ -12,18 +12,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 awesomeThings">
-        <li><a href="#" tooltip="{{thing.info}}">{{thing.name}}<% if (filters.socketio) { %><button type="button" class="close" ng-click="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 main.awesomeThings">
+        <li><a href="#" tooltip="{{thing.info}}">{{thing.name}}<% if (filters.socketio) { %><button type="button" class="close" ng-click="main.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="newThing">
+      <input type="text" class="form-control" placeholder="Add a new thing here." ng-model="main.newThing">
       <span class="input-group-btn">
-        <button type="submit" class="btn btn-primary" ng-click="addThing()">Add New</button>
+        <button type="submit" class="btn btn-primary" ng-click="main.addThing()">Add New</button>
       </span>
     </p>
   </form><% } %>

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

@@ -10,17 +10,17 @@ 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 awesomeThings')
+      ul.nav.nav-tabs.nav-stacked.col-md-4.col-lg-4.col-sm-6(ng-repeat='thing in main.awesomeThings')
         li
           a(href='#', tooltip='{{thing.info}}')
             | {{thing.name}}<% if (filters.socketio) { %>
-            button.close(type='button', ng-click='deleteThing(thing)') &times;<% } %><% if (filters.socketio) { %>
+            button.close(type='button', ng-click='main.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='newThing')
+      input.form-control(type='text', placeholder='Add a new thing here.', ng-model='main.newThing')
       span.input-group-btn
-        button.btn.btn-primary(type='submit', ng-click='addThing()') Add New<% } %>
+        button.btn.btn-primary(type='submit', ng-click='main.addThing()') Add New<% } %>
 
 footer

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

@@ -5,13 +5,15 @@ angular.module('<%= scriptAppName %>')
     $routeProvider
       .when('/', {
         templateUrl: 'app/main/main.html',
-        controller: 'MainCtrl'
+        controller: 'MainController',
+        conterollerAs: 'main'
       });
   });<% } %><% if (filters.uirouter) { %>.config(function($stateProvider) {
     $stateProvider
       .state('main', {
         url: '/',
         templateUrl: 'app/main/main.html',
-        controller: 'MainCtrl'
+        controller: 'MainController',
+        conterollerAs: 'main'
       });
   });<% } %>

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

@@ -1,27 +1,33 @@
 'use strict';
+(function() {
 
-angular.module('<%= scriptAppName %>')
-  .controller('MainCtrl', function($scope, $http<% if (filters.socketio) { %>, socket<% } %>) {
-    $scope.awesomeThings = [];
+function MainController($scope, $http<% if (filters.socketio) { %>, socket<% } %>) {
+  var self = this;
+  this.awesomeThings = [];
 
-    $http.get('/api/things').then(function(response) {
-      $scope.awesomeThings = response.data;<% if (filters.socketio) { %>
-      socket.syncUpdates('thing', $scope.awesomeThings);<% } %>
-    });
+  $http.get('/api/things').then(function(response) {
+    self.awesomeThings = response.data;<% if (filters.socketio) { %>
+    socket.syncUpdates('thing', self.awesomeThings);<% } %>
+  });
 <% if (filters.models) { %>
-    $scope.addThing = function() {
-      if ($scope.newThing === '') {
-        return;
-      }
-      $http.post('/api/things', { name: $scope.newThing });
-      $scope.newThing = '';
-    };
+  this.addThing = function() {
+    if (self.newThing === '') {
+      return;
+    }
+    $http.post('/api/things', { name: self.newThing });
+    self.newThing = '';
+  };
 
-    $scope.deleteThing = function(thing) {
-      $http.delete('/api/things/' + thing._id);
-    };<% } %><% if (filters.socketio) { %>
+  this.deleteThing = function(thing) {
+    $http.delete('/api/things/' + thing._id);
+  };<% } %><% if (filters.socketio) { %>
 
-    $scope.$on('$destroy', function() {
-      socket.unsyncUpdates('thing');
-    });<% } %>
-  });
+  $scope.$on('$destroy', function() {
+    socket.unsyncUpdates('thing');
+  });<% } %>
+}
+
+angular.module('<%= scriptAppName %>')
+  .controller('MainController', MainController);
+
+})();

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

@@ -1,14 +1,14 @@
 'use strict';
 
-describe('Controller: MainCtrl', function() {
+describe('Controller: MainController', function() {
 
   // load the controller's module
   beforeEach(module('<%= scriptAppName %>'));<% if (filters.uirouter) {%>
   beforeEach(module('stateMock'));<% } %><% if (filters.socketio) {%>
   beforeEach(module('socketMock'));<% } %>
 
-  var MainCtrl;
-  var scope;<% if (filters.uirouter) {%>
+  var scope;
+  var MainController;<% if (filters.uirouter) {%>
   var state;<% } %>
   var $httpBackend;
 
@@ -20,14 +20,14 @@ describe('Controller: MainCtrl', function() {
 
     scope = $rootScope.$new();<% if (filters.uirouter) {%>
     state = $state;<% } %>
-    MainCtrl = $controller('MainCtrl', {
+    MainController = $controller('MainController', {
       $scope: scope
     });
   }));
 
-  it('should attach a list of things to the scope', function() {
+  it('should attach a list of things to the controller', function() {
     $httpBackend.flush();<% if (filters.jasmine) { %>
-    expect(scope.awesomeThings.length).toBe(4);<% } if (filters.mocha) { %>
-    <%= expect() %>scope.awesomeThings.length<%= to() %>.equal(4);<% } %>
+    expect(MainController.awesomeThings.length).toBe(4);<% } if (filters.mocha) { %>
+    <%= expect() %>MainController.awesomeThings.length<%= to() %>.equal(4);<% } %>
   });
 });