TOP_NAV

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Angular JS


What is Angular JS?

Angular JS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.3.


Features

  • Powerful JavaScript based development framework to create RICH Internet Application(RIA).
  • Write client side application (using JavaScript) in a clean MVC(Model View Controller) way.
  • Cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
  • Open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

 Components

The AngularJS framework can be divided into following three major directive parts −
  • ng-app− defines and links an AngularJS application to HTML.
  • ng-model− binds the values of AngularJS application data to HTML input controls.
  • ng-bind−  binds the AngularJS Application data to HTML tags.

 

 Model

The Model
The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.
The View
A presentation of data in a particular format, triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.
The Controller
The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.
mvc.PNG

Installation & Setup

Step 1: First of all open the link https://angularjs.org/ then it will open a page:
Step 2: Download and install –
Step 3: Create a HTML page and in this page include the AngularJS JavaScript file as follows:
<head>
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
</head>
Step 4: Then run the HTML page in the browser.
Example
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "">
<label>Name:</label>
<input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
<h3>Hello {{yourName}}!</h3>
</div>
</body>
</html>

Output

Open textAngularJS.htm in a web browser. Enter  and see the result.
1.PNG

 

How AngularJS integrates with HTML


  • ng-app directive indicates the start of AngularJS application.
  • ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive.
  • ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.
  • Closing</div> tag indicates the end of AngularJS application.

 Expressions

It can be written inside double braces: {{ expression }}.
It can also be written inside a directive: ng-bind="expression".
AngularJS will resolve the expression, and return the result exactly where the expression is written.
They are much like JavaScript expressions: They can contain literals, operators, and variables.
  1.  NUMBERS 
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>
  USING ng-bind
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>


2 .String
<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>


3. Objects

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>


4.Arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Difference 

  • Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
  • Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
  • AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
  • AngularJS expressions support filters, while JavaScript expressions do not.

No comments:

Post a Comment

Subscribe to: Posts (Atom)