First AngularJS Application

Aniket Narvankar
7y
3.6k
0
1

Blog

So, to start with the first question: What is AngularJS and what are its benefits? Here is a look at it:

Angular JS

Angular JS is a Javascript framework that helps build web applications

Benefits of Angular JS

Dependency Injection
Two Way Data Binding
It is one of the important features of AngularJs. It keeps the model and the view in sync.That means a change in the model updates the view, and a change in the view updates the model.
Testing
Model View Controller
In Angular it is very easy to develop your applications using MVC. All you have to do is to split your application code into MVC components i.e. Model,View and Controller. The rest that is managing those components and connecting them together which is done by Angular automatically
Directives-They control the Behaviour of DOM Elements
Filters-Filters provide flexibility to the application

Let us create our first AngularJS Application. For this all you have to do is download a script file which is available on the following website, angularjs.org, as shown in the image. You can download the angularjs script file from a given website by clicking on the download button and adding a reference of this script file to your project,

First open Visual Studio then click on file-new project-select asp.net webapplication from project template and click ok.

Now right click on project on solutions explorer and add a new html page as shown below:-

Now add a reference of angularjs script which we have downloaded and included in our project into the head section as shown,

And the next step is to add a ng-app directive somewhere in the html,I have included in the body element.

Here ng stands for angular and ng-app directive is the starting point of angular js application. Angular framework will first search for this ng-app directive in the html page if ng-app directive is found then angular bootstraps itself and starts managing the section of the page that has a ng-app directive.

At the moment we have included the ng-app directive in the body section so everything in the body section will be manage by Angular.

Now I included a div element as shown in the image:-

Now here I want to compute the sum of 10 + 20. I have included it in double curly braces.

The double curly braces will treat that as an expression and compute the sum.This double curly braces are called binding expression in angular. Browse the html page,you will see the following output as given below it will show sum of 10 + 20

Now the ng-app directive which is applied to the body element. I am going to move it to the div element and include one more div element to which I have not applied ng-app directive and in that I am calculating sum of 40 and 30 as shown in the image

Now run the application and you will see the output as shown below. The expression is not evaluated and shown as it is.This is beacuse angular manages that section of the page that has a ng-app direcitve.

Now move the ng-app directive to html element as shown and angular will evaluate everything inside the html section.You can also write a boolean expression or a simple javascript object or an array inside the binding expression as shown below

<!DOCTYPE html>
<html ng-app>
<head>
<script src="Scripts/angular.min.js" lang="ja" type="text/javascript"></script>
<title></title>
</head>
<body>
<div> {{{Name : 'Abhiraj',Age:'27'}.Age}}
</div>
<div> {{['Abhiraj','Kedar','Pritesh'][2]}}
</div>
<div> {{1 == 2}}
</div>
</body>
</html>

Now browse the page and you will recieve following output,

27
Pritesh
false

Thus in this blog I have tried to cover almost all the points related to ng-app directive. I will come with other directives available in angular in further blogs.Please do let me know if anything is missing in the blog.

AngularJS

Up Next

AngularJS Quiz Application using MVC

Ebook Download

View all

Hands-On With AngularJS Using ASP.NET

Read by 6.3k people

Download Now!

Learn

View all