• Skip to main content
  • Skip to primary sidebar

Ryan McCormick

Dedicated Dad, Software Engineer and Lover of Coffee

Refactor Legacy AngularJS Controller to ControllerAs Syntax

July 30, 2017 by Ryan McCormick Leave a Comment

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.

Related

Filed Under: AngularJS (1x branch) Tagged With: angularjs, controlleras syntax

Reader Interactions

Leave a Reply Cancel reply

Primary Sidebar

Recent Posts

  • Force Quit Kill all Chrome Windows MacOS
  • SOLVED: Angular 6 CLI Karma Stuck in Single Run | Karma Stops Running
  • How to Manually Install Java 8 on Ubuntu 18.04 LTS
  • Remove VirtualBox from Ubuntu 16.04 Xenial
  • Clear all Node Modules Folders Recursively Mac/Linux

Recent Comments

  • KKV on Webstorm adding spaces between imports and braces | JavaScript and TypeScript
  • jusopi on Clear all Node Modules Folders Recursively Mac/Linux
  • Qaisar Irfan on Clear all Node Modules Folders Recursively Mac/Linux
  • mustafa on Remove VirtualBox from Ubuntu 16.04 Xenial
  • Pourya on How to Manually Install Java 8 on Ubuntu 18.04 LTS

Archives

  • May 2019
  • May 2018
  • April 2018
  • March 2018
  • January 2018
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • March 2017
  • December 2015
  • November 2015
  • July 2015
  • April 2015
  • February 2015
  • September 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • October 2013
  • August 2013
  • June 2013
  • April 2013
  • March 2013
  • February 2013
  • December 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • May 2012
  • March 2012
  • February 2012
  • December 2011
  • November 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • August 2009
  • July 2009
  • May 2009

Categories

  • Angular
  • Angular 2
  • AngularJS (1x branch)
  • Computer Q&A
  • ES2015
  • Internet Marketing
  • Javascript
  • Job Interviews
  • Job Search
  • Karma
  • Laravel
  • Linux
  • Linux/Unix Tips
  • MacOS
  • Microsoft Access
  • Microsoft Excel
  • Microsoft Outlook
  • Microsoft Word
  • News
  • Node
  • Open Source
  • PHP
  • Protractor
  • Resume Writing
  • Spring Boot
  • SQL
  • Ubuntu
  • VBA
  • VBScript
  • VirtualBox
  • Web Development
  • Windows Tips
  • Wordpress

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in