Refactor Legacy AngularJS Controller to ControllerAs Syntax

There are a lot of resources and examples available on the web for learning AngularJS(1.x branch). Some are good, some are bad and some are super ugly and confusing. The recommended approach for building scalable applications with AngularJS is to follow the controllerAs syntax.

In this post, I will be breaking down a really ugly legacy controller and converting it to controllerAs syntax.

Legacy Ugly Angular Controller Example

It can probably get uglier than this, but this is going to be our starting point.

// File: app.js
var app = angular.module('myApp', []);

app.controller('AppController', ['$scope', '$log', function($scope, $log) {
  $scope.title = 'Welcome to My App';
  $scope.setTitle = function(newTitle) {
    $log.log('New title is ' + newTitle);
    $scope.title = newTitle;
  };
}]);

ControllerAs Conversion

Before we break the above example to controllerAs, we need to analyze to see what it is doing. The example above declares the main app module and sets a controller on it in the same file.

If this was the whole app, it would be just fine but since this scenario is almost never the case, we need to break it out into seperate files.

Create app.module.js file

(function() {
  'use strict';

  angular.module('app', []);

})();

Create app.controller.js file

(function() {
  'use strict';

  angular
    .module('app')
    .controller('AppController', AppController);

  AppController.$inject = ['$log'];

  /* @ngInject */
  function AppController($log) {
    var vm = this;
    vm.title = 'Welcome to My App';
    vm.setTitle = setTitle;
    
    function setTitle(newTitle) {
      $log.log('New title is ' + newTitle);      
      vm.title = newTitle;
    }
  }

})();

Convert to ControllerAs Syntax Summary

So what did we do?

1. Use module setter in app.module.js file and use getter from app.controller.js file. By following this approach, we set the module once and get it from the controller. If we had a directive or service, we would also be only setting the module once in the app.module.js file and getting it once in the respective service or directive file. This approach helps prevent variable collisions and leaks.
2. Wrap all methods in a Javascript Immediately-Invoked Function Expression (IIFE) to prevent global variable scoping and enforce local variable scoping. This approach also helps make code more minifiable.
3. Enable strict mode with 'use strict'. I am not going to go into all of the benefits of strict mode here. There is an excellent article by John Resig ECMAScript 5 Strict Mode, JSON, and More that goes into more detail if you are interested.
4. Use named functions which removes callbacks and nested callbacks to produce more readable code.
5. Use an injection schema that is more conducive to making code minifiable when using a build process with gulp, grunt, webpack, etc…

More ControllerAs Syntax Resources

1. If you are interested in learning more about the controllerAs syntax, I highly recommend the Angular style guide by John Papa
2. I also highly recommend John Papa’s course on Pluralsight: AngularJS Patterns: Clean Code that goes into great detail about each section of the style guide listed above.

Please comment with questions, suggestions, best practices.