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!
