In keeping with my previous posts about my Webstorm templates, this is my template for creating a new Angular Service.
| (function() { | |
| 'use strict'; | |
| angular.module('${moduleName}', []) | |
| .service('${serviceName}', [${serviceName}]); | |
| function ${serviceName}() { | |
| var service = this; | |
| } | |
| })(); |
Previous Posts:
If you’ve seen any of my Angular code, you will notice that I use a LOT of element directives (Angular 2 calls these “components”!). You’ll also notice that I like writing a lot of unit tests.
After my previous post on WebStorm templates, I came to the realization that I was writing a lot of boiler plate code for testing these directives. Instead of rewriting these tests every time, I’ve created a template to use for unit testing directives.
(One thing to note, this requires at least angular mocks 1.3.15 for the bindings options in the $controller constructor)
| 'use strict'; | |
| describe('My Great Directive', function() { | |
| var $rootScope; | |
| var $controller; | |
| var $window; | |
| var $httpBackend; | |
| var $compile; | |
| var scope; | |
| var MyFancyService | |
| var MyGreatDirectiveController; | |
| beforeEach(function() { | |
| module('myApp.greatDirective'); | |
| inject(function(_$rootScope_, _$httpBackend_, _$compile_, _$controller_, _$window_, _MyFancyService_) { | |
| // Native Angular Injections | |
| $rootScope = _$rootScope_; | |
| $controller = _$controller_; | |
| $window = _$window_; | |
| $compile = _$compile_; | |
| $httpBackend = _$httpBackend_; | |
| scope = $rootScope.$new(); | |
| // Custom Injections | |
| MyFancyService = _MyFancyService_; | |
| // Locals are the injections to the directive's controller | |
| var locals = { | |
| $window: $window, | |
| MyFancyService: MyFancyService | |
| }; | |
| // Bindings are the objects that are bound to the directive's scope | |
| var bindings = { | |
| fancyString: 'fancy-string' | |
| }; | |
| MyGreatDirectiveController = $controller( | |
| 'MyGreatDirectiveController', | |
| locals, | |
| bindings | |
| ); | |
| }); | |
| }); | |
| describe('Directive Controller', function() { | |
| it('should be a proper contoller', function() { | |
| expect(MyGreatDirectiveController).toBeDefined(); | |
| }); | |
| }); | |
| describe('Compiled Directive', function() { | |
| var responseText; | |
| beforeEach(function() { | |
| responseText = 'My Great Directive!'; | |
| $httpBackend.whenGET('/app/partials/great.directive.html').respond(responseText); | |
| }); | |
| it('should compile', function() { | |
| var element = $compile('<my-great-directive></my-great-directive>')(scope); | |
| scope.$digest(); | |
| $httpBackend.flush(); | |
| expect(element.html()).toContain(responseText); | |
| }); | |
| }); | |
| }); |
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!
