Getting started with AngularJS

In this blog post we will start exploring the AngularJS framework. If you are not familiar with this framework do a simple search on the web and should result into bunch of introductory posts that explains the basics of AngularJS framework. Here is the one from my blog.

For few initial demos I am not planning to integrate any server side connection so the application will be just a purely client side. In the later blog posts I am planning to integrate AngularJS with the framework like Asp .Net MVC Web API. However, I will be using Visual Studio as my editor of choice because that will make things simpler when we start adding more and more server side components.

For start, let's go ahead and build an Empty Web Application in Visual Studio 2013. Here is a short video explaining how to create this.

Setting up the Project Structure

As you can see, I have added a js folder and index.html in our empty web application project.

Next, let's download the AngularJS framework from the web site and add that to our project. Go to the AngularJS Website and click download.

You have an option to download the framework locally and refer that in your project or you can use the direct CDN link if you prefer that. I will go with version 1.3.x Uncompressed. Once you click download it will take you to the page with the target JavaScript download and save that file locally on your computer.

Add the newly downloaded AngularJS file in our Empty web project. And also add the reference of the JS file to index.html page.

Next, let's add a new JS file called DemoController.js and add following code in the JavaScript file.

Enabling DOM for Angular with ng Directives

Now, that we have the project structure setup, let's go ahead and modify your Index.html markup as following.

Go ahead and run the index.html page and you should see the message you set in the Controller being displayed on the HTML.

Okey, we have our first Angular JS application running in 10 minutes. Not bad at all for a start !

Understanding what we did

So what we did here is a basic form of Data-Binding. Those who have worked with .Net this should be nothing new for them. For those who are not so familiar, data binding is the process of taking data coming from the server/db(It's complicated) and bind it to UI.

Usually you have to do varying amount of coding to achieve data binding depending on the project/technology etc. However, data binding is the first class citizen in AngularJS. If you want to find out more please read it here.