June 2015 – Adam Weeks

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.

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!

Adam Weeks

Blogs here.

Month: June 2015

Angular Base Seed Project with Gulp

Angular Directive Template for WebStorm