refactor(mail): statrt using controllerAs

src/app/pages/mail/MailTabCtrl.js

@@ -9,17 +9,11 @@
       .controller('MailTabCtrl', MailTabCtrl);
 
   /** @ngInject */
-  function MailTabCtrl($scope, $state, $stateParams, composeModal, mailMessages) {
+  function MailTabCtrl(composeModal, mailMessages) {
 
-    $scope.selectTab = function (tab) {
+    var vm = this;
-      $state.go('mail.label',{
-        label : tab
-      })
-    };
 
-    console.log($state);
+    vm.showCompose = function(subject, to , text){
-
-    $scope.showCompose = function(subject, to , text){
       composeModal.open({
         subject : subject,
         to: to,
@@ -27,8 +21,7 @@
       })
     };
 
-    $scope.tabs = mailMessages.getTabs();
+    vm.tabs = mailMessages.getTabs();
-    $scope.currentTabLabel = $stateParams.label ? $stateParams.label : $scope.tabs[0].label;
   }
 
 })();

src/app/pages/mail/detail/MailDetailCtrl.js

@@ -9,9 +9,10 @@
     .controller('MailDetailCtrl', MailDetailCtrl);
 
   /** @ngInject */
-  function MailDetailCtrl($scope, $state,$stateParams, mailMessages) {
+  function MailDetailCtrl($state, $stateParams, mailMessages) {
-    $scope.mail = mailMessages.getMessageById($stateParams.id);
+    var vm = this;
-    $scope.back = function(){
+    vm.mail = mailMessages.getMessageById($stateParams.id);
+    vm.back = function(){
       $state.go('mail.label', {
         label: 'inbox'
       })

src/app/pages/mail/detail/mailDetail.html

@@ -1,21 +1,21 @@
 <div class="message-container">
   <div class="message">
     <div class="row">
-      <button ng-click="back()" type="button" class="back-button btn btn-default btn-with-icon"><i
+      <button ng-click="detailCtrl.back()" type="button" class="back-button btn btn-default btn-with-icon"><i
           class="ion-chevron-left"></i>Back
       </button>
     </div>
     <div class="person-info row">
       <div class="col-lg-4 col-md-12  no-padding">
-        <img ng-src="{{mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
+        <img ng-src="{{detailCtrl.mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
 
         <div class="name">
-          <h2 class="name-h">{{mail.name.split(' ')[0]}}</h2>
+          <h2 class="name-h">{{detailCtrl.mail.name.split(' ')[0]}}</h2>
 
-          <h2 class="name-h second-name">{{mail.name.split(' ')[1]}}</h2>
+          <h2 class="name-h second-name">{{detailCtrl.mail.name.split(' ')[1]}}</h2>
 
           <div>
-            <span class="mail-tag tag label {{mail.tag}}">{{mail.tag}}</span>
+            <span class="mail-tag tag label {{detailCtrl.mail.tag}}">{{detailCtrl.mail.tag}}</span>
           </div>
         </div>
       </div>
@@ -27,7 +27,7 @@
           </div>
           <div>
             <i class="ion-email"></i>
-            <span class="email">{{mail.email}}</span>
+            <span class="email">{{detailCtrl.mail.email}}</span>
           </div>
         </div>
       </div>
@@ -35,7 +35,7 @@
       <div class="col-lg-4 col-md-6 col-xs-12 no-padding">
         <div class="contact-info position-address">
           <div>
-            <span class="position">{{mail.position}}</span>
+            <span class="position">{{detailCtrl.mail.position}}</span>
           </div>
           <div>
             <span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
@@ -47,32 +47,32 @@
     </div>
     <div class="line"></div>
     <div class="message-details">
-      <span class="subject">{{mail.subject}} </span>
+      <span class="subject">{{detailCtrl.mail.subject}} </span>
-      <span class="date">• {{mail.date | date : 'h:mm a MMMM d '}}</span>
+      <span class="date">• {{detailCtrl.mail.date | date : 'h:mm a MMMM d '}}</span>
     </div>
     <div class="line"></div>
-    <div ng-bind-html="mail.body" class="message-body">
+    <div ng-bind-html="detailCtrl.mail.body" class="message-body">
 
     </div>
     <div class="line"></div>
-    <div class="attachment" ng-show="mail.attachment">
+    <div class="attachment" ng-show="detailCtrl.mail.attachment">
       <span class="file-links">1 Attachment - <a href>View</a> | <a href>Download</a></span>
       <div>
         <i class="file-icon ion-document"></i>
-        <span class="file-name">{{mail.attachment}}</span>
+        <span class="file-name">{{detailCtrl.mail.attachment}}</span>
       </div>
     </div>
-    <div class="line" ng-show="mail.attachment"></div>
+    <div class="line" ng-show="detailCtrl.mail.attachment"></div>
     <div class="answer-container">
-      <button type="button" class="btn btn-with-icon" ng-click="showCompose(mail.subject,mail.email,'')"><i class="ion-reply"></i>Reply</button>
+      <button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
-      <button type="button" class="btn btn-with-icon" ng-click="showCompose(mail.subject,'',mail.body)"><i class="ion-forward"></i>Forward</button>
+      <button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-printer"></i>Print</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-android-remove-circle"></i>Spam</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>
     </div>
 
   </div>
-  <div ng-show="!mail">
+  <div ng-show="!detailCtrl.mail">
     <h5 ng-class="text-center">Nothing to show</h5>
   </div>
 </div>

src/app/pages/mail/list/MailListCtrl.js

@@ -9,17 +9,9 @@
     .controller('MailListCtrl', MailListCtrl);
 
   /** @ngInject */
-  function MailListCtrl($scope, $state, $stateParams,  mailMessages) {
+  function MailListCtrl($stateParams,  mailMessages) {
-
+    var vm = this;
-    $scope.messages = mailMessages.getMessagesByLabel($stateParams.label);
+    vm.messages = mailMessages.getMessagesByLabel($stateParams.label);
-    $scope.$parent.currentTabLabel = $stateParams.label;
-    $scope.selectMail = function (mail) {
-      $state.go('mail.detail', {
-        id: mail.id,
-        back: $stateParams.label
-      })
-    };
-
   }
 
 })();

src/app/pages/mail/list/mailList.html

@@ -21,9 +21,9 @@
   </div>
   <div class="messages">
     <table>
-      <tr ng-repeat="m in messages track by m.id | orderBy:'-date'"
+      <tr ng-repeat="m in listCtrl.messages track by m.id | orderBy:'-date'"
           class="side-message-navigation-item little-human shineHover {{m.tag}}"
-          ng-click="selectMail(m)">
+          ui-sref="mail.detail({id: m.id})">
         <td>
           <div class="mail-checkbox">
             <label class="checkbox-inline custom-checkbox nowrap margin-left">

src/app/pages/mail/mail.html

@@ -1,16 +1,16 @@
 <div class="row mail-row">
-  <div class="col-md-12 col-sm-12">
+  <div class="col-md-12">
     <blur-panel class-container="xmedium-panel mail-panel">
       <div class="mail-container">
-        <div class="row letter-layout">
+        <div class="letter-layout">
           <div class="mail-navigation-container">
             <div class="compose-button">
-              <button type="button" class="btn compose-button" ng-click="showCompose('','','')">
+              <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
                 Compose
               </button>
             </div>
-            <div ng-repeat="t in tabs" class="mail-navigation {{currentTabLabel == t.label ? 'active' : ''}}"
+            <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
-                 ng-click="selectTab(t.label)">
+                 ui-sref="mail.label({label: t.label})" ng-click="selectTab(t.label)">
               {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
             </div>
             <div class="labels">