Tag: webstorm

Angular Service Template for Webstorm

Adam WeeksLeave a comment

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;
}
})();

view raw

ServiceTemplate.js

hosted with ❤ by GitHub

Previous Posts:

Angular Directive Unit Test Template for WebStorm

Adam WeeksLeave a comment

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);
});
});
});

view raw

directive.spec.js

hosted with ❤ by GitHub

Angular Directive Template for WebStorm

Adam WeeksLeave a comment

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,
};
}
})();

view raw

DirectiveTemplate.js

hosted with ❤ by GitHub

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:
Screenshot 2015-06-11 15.09.44

You’ll then be prompted to fill out all of the variables:
Screenshot 2015-06-11 15.10.45

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!