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:
You’ll then be prompted to fill out all of the variables:
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!