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!