Angular Directive Unit Test Template for WebStorm

July 6, 2015 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 Base Seed Project with Gulp

June 29, 2015 Adam WeeksLeave a comment

I started working on another “fun” project last week. I should rephrase that. I “attempted” to start a project last week. That very first step, I got stuck. Why is starting so hard? I created a new project using yeoman, but the build process uses grunt and it is more complex than I wanted. I also tried Angular Seed, but it didn’t fit what I was looking for either.

Of course, I had just written my Angular Blackjack project from scratch, so I did what all developers do, I made my own base project!

Introducing: Angular-Base
https://github.com/adamweeks/angular-base

I’ve modified the build system a bit since the Angular Blackjack project, but not a lot. Feel free to use it to get your projects started. Keep in mind, I haven’t actually built a real project with the base yet, but I’ve started using it. I’m sure there will be changes to the base project. If you see any issues or want some features, I’m definitely open to PRs.

Angular Directive Template for WebStorm

June 11, 2015 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:

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!

Angular Directive Scope Binding Types

May 28, 2015 Adam WeeksLeave a comment

When creating an AngularJS directive, most of the time we want to pass some sort of data to that directive where it is implemented. Of course, Angular gives us multiple ways to do so. Let’s try to make sense of the different binding types: “@”, “=”, and “&”.

Using a Revealing Module Pattern for Angular Services

May 18, 2015 Adam WeeksLeave a comment

As you may have read, or if you’ve ever heard me talking about Angular, you know I’m a big fan of John Papa’s Angular Style Guide. I definitely agree with so many things in his style guide and I try to follow them in my coding. One thing that I’ve found that I’ve started to do differently though is my usage of services over factories.

Recently, long time pair programmer and code reviewer, Ryan Martinsen came across some of my code and wondered what the hell I was doing. See, in John’s guide, he relies heavily on the Revealing Module Pattern (RMP) in order to define his factories. But since I switched to using services, I brought the RMP over with me. I define all my public service methods up top and then create them as named functions below. After describing what had happened, the response from Ryan was a “Oh, ok then.” which in my book is a MAJOR win!

Here’s an example of a RMP service:

	angular.module('blogpost.service',[])
	.service('BlogpostService',BlogpostService);

	function BlogpostSerivce(){
	var service = this;

	service.getBlogs = getBlogs;
	service.createBlog = createBlog;
	service.getBlogName = getBlogName;

	//////////

	var blogName = 'Test Blog';
	var blogs = ['blog1', 'blog 2', 'blog3'];

	function getBlogs(){
	return blogs
	}

	function createBlog(blogObject){
	blogs.push(blogObject);
	}

	function getBlogName(){
	return blogName;
	}
	}

view raw

revelaing.js

hosted with ❤ by GitHub

Ionic Framework Introduction – Barcode Scanner

May 12, 2015May 12, 2015 Adam Weeks16 Comments

Just when I thought I was out, they pulled me back in! After a year off of iOS programming, who knew that all the Angular work would bring me back to mobile.

After hearing about Ionic Framework on ng-air I decided to check it out. Ionic is a mobile framework based on Cordova. It allows us to write multi-platform mobile apps with a native feel by using angular and custom ionic directives. You can read plenty on their site for more information, so let’s get into it!

Angular Project Blackjack: 13 – External Module, Keyboard

May 5, 2015May 12, 2015 Adam Weeks2 Comments

Keyboard support has been requested MULTIPLE TIMES from my friend @mhmazur during the development process. I figured it was finally time to fill his feature request.

Angular Project Blackjack: 12 – Github Pages Deploy

April 27, 2015May 12, 2015 Adam WeeksLeave a comment

(This post is part of my “from scratch” AngularJS project. If you are feeling lost, the first post is here.)

I’m not going to lie, I thought this was going to be a GREAT post! So much information about how to deploy our site to github pages and make it available for the world. The good news is, we did all the hard work in our previous post. The bad news is, this will probably be the shortest post and commit in this series.

Angular Project Blackjack: 11 – User Experience

April 20, 2015May 12, 2015 Adam WeeksLeave a comment

(This post is part of my “from scratch” AngularJS project. If you are feeling lost, the first post is here.)

Foreward

The coding portion of this post was BY FAR the most amount of time and effort I’ve put into any of them so far. My CSS skills were very rusty, so I had to do a lot of research and back and forth to get things right. More advanced front-end people may find some issues with my code, but it is, as always, a work in progress.

Experience

While our blackjack game is technically correct, it has all the glimmer of a game written for the TI-82. Don’t get me wrong, I love bootstrap, but for a game, it just isn’t enough.

Angular Project Blackjack: 10 – The Dealer

April 13, 2015May 12, 2015 Adam WeeksLeave a comment

(This post is part of my “from scratch” AngularJS project. If you are feeling lost, the first post is here.)

In order to make the game fun and realistic, we need an opponent to play against. In any given casino around the world, this opponent is the dealer. This dealer operates on a very limited set of specific rules, which makes writing a virtual version of him easy!