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+.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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!
Adam Weeks 