This is part one of my look into AngularJS.

Introduction

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.¹

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: {{ phone.name }} 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: https://github.com/angular/angular.js.

Setup

To get an idea of AngularJS try out the tutorial found https://docs.angularjs.org/tutorial. Another resource is http://www.w3schools.com/angular/angular_intro.asp.

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:

Zurb Foundation 5 for responsive front-end framework (http://foundation.zurb.com/)
Angular Foundation (http://pineconellc.github.io/angular-foundation/)
Foundation’s off-canvans (http://foundation.zurb.com/docs/components/offcanvas.html)
jQuery 2 (http://jquery.com/)
The AngularJS way to access jQueryUI DatePicker (http://jqueryui.com/datepicker/) called angular-ui-date (https://github.com/angular-ui/ui-date)
Angular-xeditable (http://vitalets.github.io/angular-xeditable/) to create editable elements
Angular ngSanitize for rendering HTML strings

Use bower (http://bower.io/) 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 (https://docs.angularjs.org/misc/faq “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