Angularjs – A Hands On tutorial

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Angularjs – A Hands On tutorial

This is a hands on tutorial on Angularjs.  We will walk through most of the key features of Angular, and by the end we will build an Angular application named Movie Stub.

You can see the live demo of the app here.

Preview:

Screen Shot 2014-03-14 at 9.01.49 PM Screen Shot 2014-03-14 at 9.02.11 PM Screen Shot 2014-03-14 at 9.02.28 PM Screen Shot 2014-03-14 at 9.02.36 PMSo, lets get started.

Contents

Code for each topic is available here. And the complete application code can be found here.

Angularjs

What

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Why

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

You can read more about the “W”s of Angularjs here.

Create an Angularjs Boilerplate [code]

To make this hands on session result in a more “re-usable” product, we will start off by creating a template. And in future if you want to create a new Angular project, you can reuse this template.

We are creating an Online Movie Ticket Booking website named movieStub. The architecture is pretty simple. We will have Nodejs & Expressjs as our server side components. Angularjs as our client side component along with Bootstrap for a pleasant UI.

Now, Create a new folder with the name movieStub. Next open Prompt/Terminal inside the movieStub folder. First we need to setup node, more details here. Next, We will init a new node project, run npm init. Hit return if you don’t want to fill any field (the default values will get applied). This will generate a package.json file, which should look something like

Even though this is a Angularjs tutorial, I thought it would not hurt anyone to learn a bit of server side. So, we will be using a Node server to server our static page. We are going to let express handle server side stuff for us. If you are not aware of express, you can check out this post & come back or else, you can copy paste the code from here to continue. To add express to our project, run npm install express --save-dev This will save express as a dev dependency to our project.

Next, we will setup bower. If you don’t have bower package manager already installed, you can install by running the following commands

Windows Mac/*nix
npm install -g bower    sudo npm install -g bower

Next, we will init a new bower file to track our dependencies. Run bower init You can do the same thing as npm init. And the final file should look something like

Lets install Angularjs & add it to our project. Run bower install angular --save-dev Next, we need to add Twitter Bootstrap to our project. Run bower install bootstrap --save-dev Next, create a new folder at the root and name it public.  Our folder structure should be like Screen Shot 2014-03-11 at 8.54.00 PM

  • Head to bower_components/bootstrap/dist and copy css,fonts & js folders to the public folder.
  • We will split our javascript files into 2 pieces. create a folder inside the js folder & name it lib.
  • Copy the contents of js folder inside the lib folder.
  • Copy angular.min.js from bower_components/angular to public/js/lib folder & jquery.min.js from  bower_components/jquery/dist to public/js/lib folder
  • Create a new file and name it index.html inside the public folder.

Our final structure will be like Screen Shot 2014-03-11 at 9.18.28 PM You can remove bootstrap.js inside the lib folder if you want. We will be referring only the minified file. Open index.html and we will set up reference to all the required resources. Copy paste the below to index.html

Do notice the data-ng-app=”” on line no 2. This is how we tell Angular to get started. There are other ways of writing the same like

<html ng-app="">  or  <html ng-app>

Its up to you. The way I wrote kind of gives a feel of completeness, again you can write it any way & Angular will work the same way.

Next create another file in the root of the movieStub folder & name it index.js. This will be our sever. Open index.js & paste the below code

That’s it!! Our basic template is done.

Back to Terminal/Prompt, run node index.js. This should start the server. Now navigate to   http://localhost:2595/ in your favorite browser & you should see our app name as heading and a sub heading. You can copy this folder structure as is and save it as a template and can use this for other projects. Now, lets dig into some Angularjs concepts.

Model Bindings [code]

Angular uses html markup as templates, and lets you define dynamic values with placeholders using the double curly braces notation {{ }}.  Angular tries to resolve the value inside the double curly braces, using a scope variable ($scope). To understand this, open index.html & add below highlighted lines

Check if the node server is running ( node index.js ) & refresh our home page  http://localhost:2595. You should see something like model_bindingAnd now, enter a movie name

model_binding_value

And bam!! The value of your favorite movie appears as you type in. So, lets analyse what all is going on.

  • Line 2  – Tells Angular to begin the magic.
  • Line 14 – We define a value (movieName) for ng-model attribute. This value will act as a variable storing the text box value. As soon as Angular see a variable inside the ng-model attribute, it will bind the variable to the $scope object & monitors for changes.
  • Line 15 – We use the movieName variable here. When the value gets updated, Angular notifies the changes to all the {{movieName}} & updates them. Also note the ng-show attribute. This tell Angular to show line 15 only when there is a valid value for movieName. 

PS: ng-model & ng-show are called as Angular directives. More on that in a moment.

Two_Way_Data_Binding

Here our template is the h1 tag, when compiled becomes our view and model is movieName.

You can read more about data bindings here.

Repeaters [code]

Repeaters are “for loops” for all you programmers. We define a list in the Angular scope & then iterate the list using a ng-repeat directive & display the data.

What are these directives you ask?

At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

More on directives here.

Now, lets create a new folder named controller inside public/js. This is where our controllers reside. Next create a new file and name it app.js.

A controllers is a JavaScript constructor function that is used to augment the Angular Scope. Remember the $scope object? This will set up the initial state of the $scope object.

Before that we will create a module & hook up the controller to it.

You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

Copy the following code to controller/app.js