feat(chat): Modify chat module to implement johnpapa styleguide.

modules/chat/client/chat.client.module.js

@@ -1,4 +1,6 @@
-'use strict';
+(function (app) {
+  'use strict';
 
-// Use Applicaion configuration module to register a new module
-ApplicationConfiguration.registerModule('chat');
+  app.registerModule('chat');
+  app.registerModule('chat.routes', ['ui.router']);
+})(ApplicationConfiguration);

modules/chat/client/config/chat.client.config.js

@@ -1,12 +1,17 @@
-'use strict';
+(function () {
+  'use strict';
 
-// Configuring the Chat module
-angular.module('chat').run(['Menus',
-  function (Menus) {
+  angular
+    .module('chat')
+    .run(menuConfig);
+
+  menuConfig.$inject = ['Menus'];
+
+  function menuConfig(Menus) {
     // Set top bar menu items
     Menus.addMenuItem('topbar', {
       title: 'Chat',
       state: 'chat'
     });
   }
-]);
+})();

modules/chat/client/config/chat.client.routes.js

@@ -1,15 +1,22 @@
-'use strict';
+(function () {
+  'use strict';
 
-// Configure the 'chat' module routes
-angular.module('chat').config(['$stateProvider',
-  function ($stateProvider) {
+  angular
+    .module('chat.routes')
+    .config(routeConfig);
+
+  routeConfig.$inject = ['$stateProvider'];
+
+  function routeConfig($stateProvider) {
     $stateProvider
       .state('chat', {
         url: '/chat',
         templateUrl: 'modules/chat/client/views/chat.client.view.html',
+        controller: 'ChatController',
+        controllerAs: 'vm',
         data: {
           roles: ['user', 'admin']
         }
       });
   }
-]);
+})();

modules/chat/client/controllers/chat.client.controller.js

@@ -1,43 +1,55 @@
-'use strict';
+(function () {
+  'use strict';
 
-// Create the 'chat' controller
-angular.module('chat').controller('ChatController', ['$scope', '$location', 'Authentication', 'Socket',
-  function ($scope, $location, Authentication, Socket) {
-    // Create a messages array
-    $scope.messages = [];
+  angular
+    .module('chat')
+    .controller('ChatController', ChatController);
 
-    // If user is not signed in then redirect back home
-    if (!Authentication.user) {
-      $location.path('/');
+  ChatController.$inject = ['$scope', '$state', 'Authentication', 'Socket'];
+
+  function ChatController($scope, $state, Authentication, Socket) {
+    var vm = this;
+
+    vm.messages = [];
+    vm.messageText = '';
+    vm.sendMessage = sendMessage;
+
+    init();
+
+    function init() {
+      // If user is not signed in then redirect back home
+      if (!Authentication.user) {
+        $state.go('home');
+      }
+
+      // Make sure the Socket is connected
+      if (!Socket.socket) {
+        Socket.connect();
+      }
+
+      // Add an event listener to the 'chatMessage' event
+      Socket.on('chatMessage', function (message) {
+        vm.messages.unshift(message);
+      });
+
+      // Remove the event listener when the controller instance is destroyed
+      $scope.$on('$destroy', function () {
+        Socket.removeListener('chatMessage');
+      });
     }
 
-    // Make sure the Socket is connected
-    if (!Socket.socket) {
-      Socket.connect();
-    }
-
-    // Add an event listener to the 'chatMessage' event
-    Socket.on('chatMessage', function (message) {
-      $scope.messages.unshift(message);
-    });
-
     // Create a controller method for sending messages
-    $scope.sendMessage = function () {
+    function sendMessage() {
       // Create a new message object
       var message = {
-        text: this.messageText
+        text: vm.messageText
       };
 
       // Emit a 'chatMessage' message event
       Socket.emit('chatMessage', message);
 
       // Clear the message text
-      this.messageText = '';
-    };
-
-    // Remove the event listener when the controller instance is destroyed
-    $scope.$on('$destroy', function () {
-      Socket.removeListener('chatMessage');
-    });
+      vm.messageText = '';
+    }
   }
-]);
+})();

modules/chat/client/views/chat.client.view.html

@@ -1,22 +1,22 @@
 <!-- The chat view -->
-<section class="container" ng-controller="ChatController">
+<section class="container">
   <div class="page-header">
     <h1>Chat Example</h1>
   </div>
   <!-- The message form -->
-  <form class="col-xs-12 col-md-offset-4 col-md-4" ng-submit="sendMessage();">
+  <form class="col-xs-12 col-md-offset-4 col-md-4" ng-submit="vm.sendMessage();">
     <fieldset class="row">
       <div class="input-group">
-        <input type="text" id="messageText" name="messageText" class="form-control" ng-model="messageText" placeholder="Enter new message">
+        <input type="text" id="messageText" name="messageText" class="form-control" ng-model="vm.messageText" placeholder="Enter new message">
         <span class="input-group-btn">
-          <button type="submit" class="btn btn-primary" ng-disabled="!messageText.length">Submit</button>
+          <button type="submit" class="btn btn-primary" ng-disabled="!vm.messageText.length">Submit</button>
         </span>
       </div>
     </fieldset>
   </form>
   <ul class="list-unstyled">
     <!-- List all messages -->
-    <li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in messages">
+    <li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in vm.messages">
       <small class="pull-right text-muted" ng-bind="message.created | date:'mediumTime'"></small>
       <img ng-src="{{message.profileImageURL}}" alt="{{message.username}}" class="pull-left chat-profile-image" />
       <div class="pull-left chat-message-details">

modules/chat/tests/client/chat.client.controller.tests.js

@@ -1,52 +1,52 @@
-'use strict';
-
 /**
  * Chat client controller tests
  */
 (function () {
+  'use strict';
+
   describe('ChatController', function () {
     //Initialize global variables
-    var scope,
+    var $scope,
       Socket,
       ChatController,
       $timeout,
-      $location,
+      $state,
       Authentication;
 
     // Load the main application module
     beforeEach(module(ApplicationConfiguration.applicationModuleName));
 
-    beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$location_) {
-      scope = $rootScope.$new();
+    beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$state_) {
+      $scope = $rootScope.$new();
       Socket = _Socket_;
       $timeout = _$timeout_;
-      $location = _$location_;
+      $state = _$state_;
       Authentication = _Authentication_;
     }));
 
     describe('when user logged out', function () {
-      beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$location_) {
+      beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$state_) {
         Authentication.user = undefined;
-        spyOn($location, 'path');
-        ChatController = $controller('ChatController', {
-          $scope: scope,
+        spyOn($state, 'go');
+        ChatController = $controller('ChatController as vm', {
+          $scope: $scope
         });
       }));
 
       it('should redirect logged out user to /', function () {
-        expect($location.path).toHaveBeenCalledWith('/');
+        expect($state.go).toHaveBeenCalledWith('home');
       });
     });
 
     describe('when user logged in', function () {
-      beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$location_) {
+      beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$state_) {
         Authentication.user = {
           name: 'user',
           roles: ['user']
         };
 
-        ChatController = $controller('ChatController', {
-          $scope: scope,
+        ChatController = $controller('ChatController as vm', {
+          $scope: $scope
         });
       }));
 
@@ -55,34 +55,34 @@
       });
 
       it('should define messages array', function () {
-        expect(scope.messages).toBeDefined();
-        expect(scope.messages.length).toBe(0);
+        expect($scope.vm.messages).toBeDefined();
+        expect($scope.vm.messages.length).toBe(0);
       });
 
       describe('sendMessage', function () {
         var text = 'hello world!';
         beforeEach(function () {
-          scope.messageText = text;
-          scope.sendMessage();
+          $scope.vm.messageText = text;
+          $scope.vm.sendMessage();
           $timeout.flush();
         });
 
         it('should add message to messages', function () {
-          expect(scope.messages.length).toBe(1);
+          expect($scope.vm.messages.length).toBe(1);
         });
 
         it('should add message with proper text attribute set', function () {
-          expect(scope.messages[0].text).toBe(text);
+          expect($scope.vm.messages[0].text).toBe(text);
         });
 
         it('should clear messageText', function () {
-          expect(scope.messageText).toBe('');
+          expect($scope.vm.messageText).toBe('');
         });
       });
 
       describe('$destroy()', function () {
         beforeEach(function () {
-          scope.$destroy();
+          $scope.$destroy();
         });
 
         it('should remove chatMessage listener', function () {
@@ -91,4 +91,4 @@
       });
     });
   });
-}());
+})();