Rob Ferguson

My 2D Diagram Editor - Part 1

Rob Ferguson -

In a previous post, I described my requirements for a 2D diagram editor and shortlisted two HTML5 diagramming libraries: Fabric.js and Draw2D.

In this post, I'll describe the steps I followed to setup my environment (OSX Mavericks) and to create the scaffolding for a new AngularJS application.

Setting up your environment

The AngularJS tool chain can be a little intimidating, so we'll set it up step by step in order to understand how Angular applications are built and structured.

We'll start out by installing (or in my case, updating):

  • Xcode Command Line Tools
  • Homebrew (the missing package manager for OS X)
  • Git
  • Node.js

Install the Xcode Command Line Tools

To install the Xcode Command Line Tools, enter the following command:

sudo xcode-select --install

To check that they have been installed, enter the following command::

sudo xcode-select -p

If you see:

/Applications/Xcode.app/Contents/Developer

Then you're good to go.

Note: Use the App Store to update the Xcode Command Line Tools.

Install Homebrew

To install Homebrew, enter the following command:

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

Then update your PATH:

echo 'export PATH=/usr/local/bin:$PATH' >> ~/.bash_profile

And, load the changes into your current shell:

source ~/.bash_profile

Check your environment:

brew doctor

Then check for updates:

brew update

Note: To update Homebrew, enter the following commands:

brew doctor && brew update

Install Git

We can use Homebrew to install Git, enter the following command:

brew install git

Note: To update Git, enter the following commands:

brew doctor && brew update
brew update git

Install Node.js

We can also use Homebrew to install Node.js, enter the following command:

brew install node

Note: To update Node.js, enter the following commands:

brew doctor && brew update
brew update node

When you install Node.js, npm (the Node Package Manager) will also be installed. Later on, we'll use npm to install tools like: Bower (a client-side package manager); Karma (a unit test runner) and Protractor (an end to end test runner).

What's Next

In the next post, I'll create the scaffolding for a new AngularJS application.

References: