Getting Started With AngularJS: Part One

I am going to start a new article series for AngularJS using Visual Studio. Stay tuned for all other articles on AngularJS. In this article, I’ll tell you all about AngularJS, divided into the following points:

• What is AngularJS
• History of AngularJS
• Benefits of AngularJS
• Point of Interest in AngularJS
• Example with AngularJS

What is AngularJS



AngularJS is a JavaScript framework that helps us to build a Web application. It is a library of JavaScript. It is used for single page applications. It extends HTML DOM with external attributes which make it more responsive to the user. To build AngularJS application we need only one script file, that is Angular.js, which can be downloaded from the following site. This file has a JavaScript library. It uses specific command with HTML to perform a task like filtration, data binding within the HTML page. This makes it easy for users to perform an operation on it and the built-in features with AngularJS includes template, filters, and two-way data binding. Because it is a single page application, there's no need to load the different pages for the content since the loading needs content instead of entire pages.

History of AngularJS

AngularJS was created by two developers, “MiskoHevery” and “Adam Abrons,” in 2009. AngularJS was developed by Google as an open source project which can be freely used and changed. As of November 19, 2015, the current stable version is AngularJS 1.4.8. AngularJS 2.0 was announced on September 2014 and in April 2015 the AngularJS developers announced that AngularJS 2 moved from Alpha to Developer Preview.

Benefits

• Dependency injection - It help developers to eliminate much of the code writing and is an easy to develop application.
• Data Binding - Two way data binding keeps the model and view in sync all time, so change the model and it updates the view automatically and vice versa.
• Testing - AngularJS makes it very easy to test any of its components to both unit testing and end-to-end testing which makes easy to not test any angular code.
• Routing helps developers to switch the view of the single page application.
• Model view controller - With angular it is very easy to develop applications with a clean MVC way.
• Directives - Controlling the behavior of DOM element using directives.
• It provides an excellent template engine which helps us to write HTML template with special tags.
• It handles DOM masterfully.
• Allows you to map URL fragments, using #, to templates and controllers to design single page apps easier.
• AngularJS use the directives which is like command. These commands tell angular to do its job.

Points of Interest

• Faster way of creating Web application using AngularJS.
• It helps us to easily manipulate data on the content of the page.
• It has functionality like module which makes it easier to chunk the code.
• It has Filters power so that the data can be organized in a certain way automatically. 
• AngularJS use client-side objects same for server-side objects.
• In AngularJS no need to write much of the code like JQuery.

Examples

If we need to use AngularJS in our project, download AngularJS library from site. Open this URL into your browser then click on Download AngularJS 1 option.



After that you have two options on the current window. Copy the CDN link to use AngularJS directly or you can download AngularJS file and then add this file to your project. At last use this into html page with helping <script/> tag.



After doing these steps now just create a Web site with any other IDE;  I will use Visual Studio because in an upcoming article I will explain AngularJS in ASP.NET MVC project solution in Visual Studio. So, as we can see I will just open my VS and create a Web project with the following step as in the following image:





After selecting the Web site template click on ok. Now my VS creating a website with the name “AngularDay1”.



Now just add an html page in to your website.



Give any name from which you want to get view in browser, I just use index.htm because it’s a very common name for everyone.



This is the default html source code given by visual studio and now it’s time to add AngularJS library to the Web site.



I used CDN link which I copied from the website.



Now this time we have to understand some AngularJS directives to use them into the source code which is used to extend HTML with ng- directives. There are three main directives in Angular to Start.

1. The first one is ng-app directive which is only and only used to define an AngularJS application in which we can use other AngularJS directives.
2. The ng-model directive binds the value of HTML controls where we want to calculate the value of this model or want to show in html controls like input, select and textarea.
3. The ng-bind or {{Model Object}} directive binds application data to the HTML view andprovide two way data binding.

So, firstly I just use ng-app directive to my html page body tag so that I can use all other directives of AngularJS intothe complete body as in the following image.



Now I am just writing a code to show you basic example of angular. I just want to use a textbox value on any other object, so let’s have a textbox which is known as <input type=”text”/> in html and bind this control value with a <p/>, <td/> or where you want to use this. I’ll use ng-model=”” directive to declare a model object and {{}} to data binding. Write the same code In your html page as in the following image.



After writing the same code just save your html page and open it in any browser to show the output.



Now just enter the name int the textbox which is already bound with last <td> of the table with {{}} directive, so when you just press any key in textbox simultaneously it’s will going to change the value of that <td> where it binds.



Now, I am using ng-bind=”” directive to bind the data to the specified location in the following image. But there is no difference in {{}} or ng-bing=””. Only the syntax difference can be seen. 



Now this will be the output displayed in the browser and when you again press any key to model control, I mean that textbox using ng-model=”” and that model bind in those <td>, they will change as per model value change.



Now write that same code into your project files.

Copy the Code 

<!DOCTYPEhtml>
<html>

<head>
    <title></title>
    <metacharset="utf-8" />
    <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
        </script>
</head>
<bodyng-app="">
    <table>
        <tr>
            <td>Enter Your Name : </td>
            <td>
                <inputplaceholder="Enter Name !!" ng-model="name" />
            </td>
        </tr>
        <tr>
            <td>Output 1:</td>
            <td>{{name}}</td>
        </tr>
        <tr>
            <td>Output 2:</td>
            <tdng-bind="name">
                </td>
        </tr>
    </table>
    </body>

</html>

Thanks for reading this day 1 article on Getting Started with AngularJS. Stay tuned for an upcoming article “AngularJS vs jQuery”.

Connect(“Nitin Pandit”);.