About a year ago, I switched from being a full time iOS developer back to a web developer specializing in AngularJS. Luckily, my company took a chance on me and let me learn it on the job. I have been absorbing as much Angular information as possible, trying to make sure I was at the top of my game. I found myself becoming quite skilled and even making a few small demo projects. Until, one day, I realized I didn’t really know how a lot of this worked. There was too much “magic” in the process. Sure, I could use yeoman and get an angular project building and releasing within a few hours, but I had no idea what the back end was actually doing. I felt a lot like our friend over here, not knowing some of the basics of the code. That’s why I decided to start this series of posts on creating an AngularJS project from scratch.

Most of my posts on AngularJS have been some pretty high level looks into specific topics (especially unit testing). In this series of posts, I’m going to be building a small, single-page, blackjack game in AngularJS. This will all be open sourced. We’ll be following some ground rules:

• Styleguide being used https://github.com/johnpapa/angularjs-styleguide
• Starting from scratch, no generator
• Node, Bower and Gulp will be used for the build system
• A very basic familiarity with AngularJS is assumed, beginners should check out Shaping Up With Angular by Code School

TL;DR: By the end of this post our code base should look like this: https://github.com/adamweeks/angular-blackjack/releases/tag/blog-post-1

First, let’s get the project folder going:

mkdir blackjack
cd blackjack
bower init
mkdir src src/app

Since we will be using bower, let’s configure it to install the components into our src folder so that they will be accessible from our index.html file.

.bowerrc

{
    'directory': '/src/bower_components'
}

Next, let’s install angular:

bower install angular --save

We’ll setup our files like so:
index.html
https://github.com/adamweeks/angular-blackjack/blob/blog-post-1/src/index.html
app/blackjack.module.js
https://github.com/adamweeks/angular-blackjack/blob/blog-post-1/src/app/blackjack.module.js
app/layout/shell.html
https://github.com/adamweeks/angular-blackjack/blob/blog-post-1/src/app/layout/shell.html

As you can see, we’re already starting to use John Papa’s style guide suggestions with the blackjack.module.js filename and the layout folder. Also, the .editorconfig, .jshintrc, .gitignore files are all from https://github.com/johnpapa/ng-demos/tree/master/modular

We now have our application and angular loading, so let’s load it in a browser! Oh, yea, about that. We’d really like a grunt/gulp serve solution with auto-refreshing fanciness like we get when we use yeoman to generate a project, but that’s for another blog post! We can serve from our src using a nifty node app called http-server

npm install http-server -g
cd src
http-server

And so, we’ve hit our commit. We’ve got an angular app serving text. This seems like a good stopping point. Stay tuned for more progress on our game!

Up next: Our First Controller