Angular Directive Template for WebStorm

If you’re like me, you find yourself rewriting a lot of boilerplate code with Angular. Especially when creating new files. I just started using templates in WebStorm and it is quite the time saver!

Here’s my first one I use for creating a new directive. This utilizes the bindToController feature of directives for Angular 1.3+.


(function() {
'use strict';
angular
.module('${moduleName}')
.controller('${controllerName}', [${controllerName}])
.directive('${directiveName}', [${directiveName}]);
function ${controllerName}() {
var vm = this;
vm.activate = function() {
};
vm.activate();
}
function ${directiveName}() {
return {
restrict: 'E',
scope: {},
templateUrl: '',
controller: '${controllerName}',
controllerAs: 'vm',
bindToController: true,
};
}
})();

Take this code and create a new template with it in WebStorm by going to Preferences, Editor, File and Code Templates, then hitting the “+” button.

Once the template is in Webstorm, you can see it in the new file window:
Screenshot 2015-06-11 15.09.44

You’ll then be prompted to fill out all of the variables:
Screenshot 2015-06-11 15.10.45

Hope this saves some time!

P.S. For you Sublime Text users, you can use this as a ‘trigger’ as well for use in new files!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s