Jesse's Octopress Blog

A blogging framework for hackers.

AngularJS Tutorial

I recently completed an AngularJS tutorial that is available at the official AngularJS website.

I love the structure of this tutorial. After cloning the git repository, you will find that the sections are broken down in branches. To access the first section you use git checkout -f step-0

This well written tutorial makes a point of highlighting keywords such that essential terms and concepts standout.

Pre-requisite Knowledge

  • *NIX Shell / Command Line
  • git (Basic Commands)
  • HTML
  • REST

Testing

I am familiar with test driven development and behavior driven development in a Ruby on Rails environment. Specifically I have written tests in Rspec and Cucumber.

This AngularJS tutorial provides unit testing using Karma, as well as “End to End” tests which are run through webdriver.

I think using these two types of testing are good practice. The unit tests provide fast functional coverage; while the end to end tests provide tests that closely mirror a real user. Smartly written tests will save you a lot of time and keep your refresh button from wearing out.

The javascript unit tests remind me a bit of rspec. There is a plain English description of expected behavior, followed by the code to perform the test. I have always preferred this compact style as opposed to splitting up the description and code like with cucumber tests.

AngularJS Vocabulary

Routing

The syntax of routes is similar to routing in Rails. The construction of URLs is identical. Variables in the url are preceded by a colon. For example /phones/:phoneId could be a valid rails route; though I am not sure CamelCase is acceptable in Rails routing.

Filtering

Filters can be chained together by using the pipe | character as a delimiter. This feels very intuitive to me as it is reminiscient of piping output to grep or other tools in the terminal.

Event Handlers

One of the most basic handlers is ngClick. You can pass a function of the relevant scope to ngClick – this is very straight forward. But I wondered if you could pass two or more functions to ngClick. Indeed you can with an array. For example ng-click="[setImage(img), setBackground(img)]" could be used to execute two functions.

Animations

AngularJS Animation Guide

Speed Bumps

The first problem I ran in to was when I tried to run the tests using npm test. I received an error message:

ERROR [launcher]: Cannot start Chrome
Can not find the binary google-chrome
Please set env variable CHROME_BIN

This is because I use Chromium, the open source version of the Google Chrome browser. The fix was quite simple. Just as the error message requested I ran the command with an environmental variable:

CHROME_BIN=chromium npm test

Comments