Angular Blackjack: Converting to Webpack

It has been a while since I’ve touched my Angular Blackjack project. When I first started working on it, I created a build process that used gulp-concat to simply merge all our application files into one. Let’s bring our application into 2015, ES2015 that is, with a modular loading system.

For this exercise I decided to use Webpack. I could’ve easily used jspm or browserify, but Kent C. Dodds‘s series on was easy to follow and very informative:

For a quick TL;DR, you can see the pull request of all the changes made:

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


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


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.


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 »

Angular Project Blackjack: 9 – Game Service

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

Back to it

We’ve got a good setup now, with our gulp file building and running as necessary. Let’s move back to working on our code!

A Game Service

In our GameController we have the ability to deal a hand of cards but we can’t really do anything with it yet. To do so, we need to start putting the blackjack game rules into our application. Let’s create a GameService to start handling these rules for us. The main thing our GameService will do for now will be to take a hand of cards and return the numeric value of that hand. We can then use that value in our controller to enable/disable actions a user can take on the hand.

Read More »

Angular Project Blackjack: 7 – File Concatenation with Gulp

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

We’ve created quite a lot of files in just our application so far. Unfortunately, for every one of those files, it means we need to add an include to our index.html file and increase the request count for visitors just to load the app. Wouldn’t it be nice if we could just package all of our code into one file and just load that file in the application? That’s exactly what we’ll set out to do here.

There are a TON of applications that will get us the end result we are looking for: browserify, require, webpack, etc. Although, in my opinion, the simplest and easiest to understand is gulp-concat. At its very basic form, gulp-concat literally merges the files you give it into one output file. To get it going, we’ll need to have gulp installed, and get to gulp installed, we really should know what it is doing first!

Read More »

Angular Project Blackjack: 6 – Do You Even TDD Bro?

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

Previously, I had mentioned that test driven development hasn’t really “stuck” for me and I find myself switching back to BDD for the most part. I find that this is usually because I don’t plan features out far enough in advance and I’m more of the “experiment and refactor” kind of developer. I have found instances where TDD actually works better for me, and today’s topic is one of those instances.

We are going to be working on the card service. This service will allow us to get a deck of cards, shuffle the deck, deal from the deck. Since this blackjack project is a game based off of set rules, we know how the cards should behave. We can write tests against these rules and then we’ll write our service to meet the rules. The rules are:

  • We should be able to get a new deck of cards with the object type “Deck”
  • The deck should contain 52 cards
  • There should be no duplicate cards in a deck
  • Each card should have a rank and a suit.
  • We should be able to ‘deal’ a card from a deck that has undealt cards in it.
  • Attempting to ‘deal’ from a deck with no undealt cards returns false
  • When a card is dealt, it is no longer in the cards array
  • We should be able to shuffle the deck and randomize all undealt cards.
  • We should be able to ‘reset’ a deck that will move all dealt cards into the undealt status and shuffle.

Now let’s write those tests:

Read More »

Angular Project Blackjack: 5 – Player Service

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

Now that we have used views, directives and controllers, let’s move on to another big part of the AngularJS library, “Services”. If you’ve used angular for any amount of time, I’m pretty sure you’ve already googled “What is the difference between service, factory and provider?”. I know I have and I still haven’t fully grasped it yet. The best answer I can give is that if you need it to be runtime configurable, use a provider. Otherwise, use a factory. Why? Because John Papa said to! Services and factories are nearly identical, but using the revealing module pattern, you can make them really look like header and implementation files, which makes the Objective-C developer in me very happy!

Read More »