AngularJS Code Snippets for Visual Studio

Controllers, services and directives are some of the core features in AngularJS where you’ll end up writing a lot of your code. So why not reduce the friction and keep them consistent?

There is a lot of value in using consistent patterns in code. When I find myself using one, I create snippets to help me stick with the pattern. When the pattern evolves, I change the snippets to evolve with them. Recently I found myself using a similar pattern for create Angular controllers, factories/services and directives. So it just made sense to create Visual Studio snippets for each of them and share them. I use these and many other patterns in my upcoming course at Pluralsight on using Angular and Breeze to build a powerful SPA.

AngularJS Snippets

There’s a great set of simple instructions on this MSDN post for creating snippets. I recommend reading this through so you can create your own, or modify mine to suit your needs.

Controllers

I created snippets for creating controllers, services via factories, and directives using a pattern that’s emerged for me. You can download them here.

Once you grab these, go ahead and install them in Visual Studio. Type CTRL K, CTRL B to get to the Code Snippets Manager. Select JavaScript as the language, open My Code Snippets, then click the import button. Locate each snippet and import them.

(function () {
    'use strict';
    var controllerId = 'customController';
    angular.module('app').controller(controllerId,
        ['$scope', customController]);
    function customController($scope) {
        var vm = this;
        vm.activate = activate;
        function activate() {
        }
        //#region Internal Methods        
        //#endregion
    }
})();

Once you have the snippets, simply type the shortcut for the snippet you want followed by the TAB key and the snippet will appear. For example, when you type ngctrl followed by TAB you will see the code shown above. I use this when I open a file and create a new controller from scratch. The snippets prompt me to fill in all of the customizable parts such as module name, controller name, and first of the dependencies.

Diversion to Controller As

It also lays out the structure for how I like my controllers to look. For example, I often use the controller as syntax (learn more here in John Lindquist’s video) which melds nicely with writing the properties that I want to bind inside my View using the this syntax. Say what? OK, so basically I create a viewmodel variable called vm and I set all of my bindable members on it. Then that becomes the part that gets bound to the View when using the controller as syntax. So I create vm and set it to this. Then all of the properties on that object become bindable.

function sessions(config) {
    var vm = this;
    var keyCodes = config.keyCodes;
    var applyFilter = function (){};
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions';

Services

The ngservice snippet will create the code for a service factory. Again, the snippet will prompt you to fill in the customizable aspects. Then you can fill in the accessible members of the service by setting them on the service object. Here I start with one called getData as a starting place. This is akin to the Revealing Module Pattern which helps expose the members we want to be accessible, yet keep other internal. This is ideal for any service that may get/save data, log, store to local storage, or perform any custom service you need.

(function () {
    'use strict';
    var serviceId = 'customService';
    angular.module('app').factory(serviceId, 
        ['config', customService]);
    function customService(config) {
        var service = {
            getData: getData
        };
        return service;
        function getData() {
        }
        //#region Internal Methods        
        //#endregion
    }
})();

Directives

The ngdir snippet creates the beginnings of a directive. The snippet let you fill in the module name, directive name, first of the dependencies, and provides a structure for setting the aspects of a directive (such as the link function). It also provide the comments I often use with a directive to help me recall how to call the directive, and what the directive creates (if it has a template). Again, this is a starting point for a directive, and quite often I will add more to it (ex: scope, template, compile). But this is a nice common place to get it all started.

app.directive('customDirective', 
        ['$window', function ($window) {
    // Usage:
    // 
    // Creates:
    // 
    var directive = {
        link: link,
        restrict: 'A'
    };
    return directive;
    function link(scope, element, attrs) {
    }
}]);

Consistency

It is not important to use the patterns that I use. What is important is for you to use a pattern and be consistent within your own app. The patterns are helpful but another thing these snippets help with is minification protection for the injected dependencies. This can sometimes be forgotten when coding fast, so these snippets help me set that in place without having to think about it (or before I forget about it).

I’ll continue to evolve these over time and certainly I hope these are as useful to you as they are to me!