single page app

Get Angular Running in 5 minutes

Want to try some Angular development? Need to get a dev environment set up? With a couple of automation tools, I’ll have you up and going in 5 minutes.

Prerequisites

You need the following two apps installed:

  1. Git
  2. Chocolately package manager.

Instructions

We are going to use the Angular Seed project template.

Fire up a command window, then run the following commands:

cd\git   (change this to the folder you intend to use)
git clone https://github.com/angular/angular-seed.git
cd angular-seed
cinst nodejs.install
"c:\Program Files\nodejs\npm" install
"c:\Program Files\nodejs\npm" start

You should now be able to open http://localhost:8000/app/ in your web browser.

What just happened?

git clone https://github.com/angular/angular-seed.git

This cloned Angular Seed to your local drive.

cinst nodejs.install

Chocolatey installed nodejs and npm (node package manager).

"c:\Program Files\nodejs\npm" install

NPM found the node based project in your current folder, and automatically installed the node dependencies.

"c:\Program Files\nodejs\npm" start

NPM launched the node.js instance, which happens to be available at http://localhost:8000/app/

Too easy! :)

For a full run down of how to use the template, go here: angular-seed on github.

/eof

Create a Single Page App in 2 Minutes using Ember App Kit

Single Pages Apps (SPAs) are the current flavour of the month. They have seemingly appeared from nowhere, but now it seems like every developer is talking about them. Wikipedia describes this pattern as follows:

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

In my experience they offer some advantages over traditional apps:

  • Very responsive
  • Rapid development time
  • Data is usually provided via a REST API - making integration to other systems easy

along with some disadvantages:

  • Usually implemented with javascript (with all baggage it brings, such as horrendous function passing syntax everywhere)
  • Can be harder to debug - you can end up in dependency hell
  • Common tasks such as continuous integration is harder than with more mature patterns such as MVC (example: making javascript unit tests play nice with TFS).

The high responsiveness alone makes SPAs worth of investigating. Responsive web apps == happy users!

Now I’m going to show you how to build one.

Ok, I’m sold. What now?

So, where do we start? The SPA (and javascript) community is fast moving place. I have lost track of the number of new templates and libraries in use… Knockout, Angular, Durandal, Ember, Bootstrap, JQuery, etc, etc, etc. You can attempt to roll your own SPA from the ground up, or you can use a ready made project template - such as the Ember App Kit.

Ember App Kit gives you:

  • A nice project structure
  • GruntJS automation for minification, compilation, and deployment
  • Ember SPA framework - with Handlebar templates, routing, controllers
  • Unit tests with QUnit
  • Javascript 6 (ECMA6) modules (this is very very cool- a tool called a transpiler is used. ECMA6 takes Javascript into the realm of modern languages with a proper object model and sane module support)

Esentially, this kit gives us an out-of-the-box ready to go application. You can use it as a starting point to customise and build on for your own application.

Let’s get started

  1. Go to Ember App Kit’s git hub page and either (https://github.com/stefanpenner/ember-app-kit/archive/master.zip">Download the template (and unzip it to a folder) or clone the repo.
  2. Install Node JS if you don’t already have it. Ember App Kit uses Grunt to automate various tasks, and grunt uses Node.
  3. Once you have Node, open a command window and do a global install of Grunt using the following command: npm install -g grunt-cli
  4. Now install Bower. Bower is a client side package manager: npm install -g bower
  5. Still in the commend window, change to your new folder from step one. Install your npm dependencies: npm install
  6. Install your Bower dependencies: bower install

Now run the app

The following command will run your app in debug mode and watch for file changes (restarting the app as needed): grunt server

…and this is the result:

Where to now?

You now have a fully working Ember app ready to build on. Check out the Ember Sherpas guide as well as the getting started guide to get some in depth detail on some of the features mentioned above. Be sure to leave a comment if you find this helpful (or not so helpful).

References

/eof