Introduction to AngularJS

Suryanarayana

AngularJS is a JavaScript UI framework that was initially designed by Misko Hevery and Adam Abrons in 2009. It has recently gained a lot of popularity (and is justified too!). Thanks to its unique approach that says – “Angular is what HTML would have been, had it been designed for applications”. Meaning it abstracts a lot of things which requires a web developer to write in order to create a Web application, which may include – CRUD functionality support, Data-Binding, DOM manipulation, some HTML templating solution etc., But what is special about Angular is that it achieves all of these using a special construct called as “Directives” which look much like attributes in an html tag.

While the javascript frameworks likes’ jquery code written to create HTML and manipulate them, Angular goes in the opposite direction – it uses the directives approach and makes HTML to assemble the application which is quite unique.

In addition, a major strength of AngularJS is its beautiful support for “Dependency Injection” which opens up a huge set of opportunities for creating Web applications by providing the developers a complete client side solution where they can use patterns like MVC.

In this blog, we are going to get a quick hands-on about how to work with AngularJS. It is purely a demonstration of some basic capabilities of AngularJS and in no way educates the reader best practices in AngularJS or JavaScript. To follow, you will need

1. Simple text editor: You can use any simple text editor like “Notepad”. In the hands-on tutorial, I will be using an open source editor called as “Brackets”. Brackets has a nice feel and beautiful preview. A free download is available at http://brackets.io/. If you are a DOT Net Developer, you can follow this tutorial using Visual Studio.

2. AngularJS scripts: AngularJS scripts can be downloaded from: https://angularjs.org/ . You can use the provided CDN link. I will use the CDN link for simplicity.

3. Browser: And last but not the least, you need a browser! For the purposes of this tutorial, I will be using Google Chrome. Google Chrome works with brackets in the live preview option.

(Note: There is an interesting online editor called plnkr. I prefer working offline because it is more comfortable)

Let’s get started – Setting up the stage:

• Step 1 – Create a Folder and File: Create a folder named “NGDemo” and save it to your desktop. Open brackets, click on “File” in the menu, go to “Open Folder” and select the”NGDemo” folder. Next, you will need to add a new file. Go to “File > New” and save this file as “demopage.html”.

• Step 2 – Prepping the Page and Adding AngularJS script: To start the html page, add the following script tag and src attribute that points to: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js

Congratulations! You are ready to work with AngularJS! In my next blog “Getting started with AngularJS – Part 2″ I will demonstrate some basic capabilities of AngularJS.