AngularJS

What IS Angular JS

Angular JS is javascript framework that helps built web application

It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google.

Benefits of angular JS

1. Dependency Injection

2. Two way Data Binding (insert image releated to two way data binding)

3. Testing

4. Model View Controller

5. Directives, Filters etc.

Concepts :

Following diagram depicts some important parts of AngularJS.

A Simple Angular JS Example

<html>

<head>

<title>Simple AngularJS Application</title>

</head>

<body>

10 + 20 = {{ 10 + 20 }}

</div>

</body>

</html>

Explanation

ng prefix stands for angular.

ng-app directive is starting point of angularJS application.

Angular framework will firstly check for the ng-app directive somewhere in html page if ng-app found then angular bootstrap itself and starts to manage the

section of page that has ng-app directive.

In above example ng-app directive included within the body section so everything within the body section is managed by angular.

To display the sum of 10 and 20 we use the double curly braces “{{ }}”.

In AngularJS we call it Binding Expressions. Within curly braces we can specify any angular expression.

In above example we specify {{ 10 + 20 }}, so angular take it as a expression and add those numbers.

Output

Steps to create AngularJS Application

Step 1 − Load framework

Step 2 − Define AngularJS Application using ng-app directive

.
.
.
</div>

Step 3 − Define a model name using ng-model directive

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 4 − Bind the value of above model defined using ng-bind directive.

<p>Hello <span ng-bind = "name"></span></p>

Example

<html>

<head>

<title>AngularJS First Application</title>

<body>

<h1>Sample Application</h1>