Angular Directive Template for WebStorm

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+.

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!

Using a Revealing Module Pattern for Angular Services

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:

Ionic Framework Introduction – Barcode Scanner

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!

Read More »

Angular Project Blackjack: 12 – Github Pages Deploy

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

Release-the-kraken-template-500js031710

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.

Read More »

Angular Project Blackjack: 11 – User Experience

(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.

Read More »