AngularJS Intro and Setup

posted in: Uncategorized | 0

This is part one of my look into AngularJS.

  1. AngularJS Intro and Setup
  2. AngularJS and Modernizr
  3. AngularJS and jQueryUI DatePicker
  4. AngularJS with TextArea and Scroll To
  5. AngularJS and Javascript Tips
  6. Coming soon…



AngularJS is a open source, cross platform, javascript framework. It is used to develop single page applications (SPA). A SPA is when resources are loaded and added dynamically as needed and the page is not reloaded. The first version (1.0) of AngularJS was released in 2012 and was in development since 2009. It follows the model view controller (MVC) idea.1

The main point with AngularJS is you have directives: ng-app, ng-model (binding between the view, html, and the scope, i.e. controller), etc. and expressions: {{ }} will be replaced by the value of the expression.

The current version of AngularJS, as of writing, is 1.2.24 static-levitation (2014-09-09) which can be found here:



To get an idea of AngularJS try out the tutorial found Another resource is

To quickly get a project started clone the angular phonecat tutorial project:

Then rename directory and remove/clean-up files that are related to phonecat.

In my project that I did required the following to be added:

Use bower ( to manage the components. Edit bower.json and add the following:

Then run bower update  which will update and install any missing libraries. Next run [sudo] npm update to make sure everything else is updated to the latest version.

Edit app/js/app.js to include the following before ngRoute:

Edit app/index.html and add the following inside the <head> section:

Inside the <body> section at the bottom before </body>, add jQuery before angular.js otherwise it would use a lite version of jQuery called jQLite ( “Does Angular use the jQuery library?”):

That is it for the basic setup I did for my first AngularJS web app. More to coming soon.

1 AngularJS, Wikipedia