Saturday, November 1, 2014

AngularJS Tutorial Part 1



AngularJS Tutorial

AngularJS extends HTML with new attributes
AngularJS is perfect for SPAs (Single Page Applications)
AngularJS is easy to learn

Try it Yourself Examples in Every Chapter


<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>


What You Should Already Know
Before you study AngularJS, you should have a basic understanding of:
  • HTML
  • CSS
  • JavaScript

AngularJS Introduction

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

AngularJS is a JavaScript Framework

AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

AngularJS Extends HTML

AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.
Example explained:
AngularJS starts automatically when the web page has loaded.
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
Note
You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.


AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS expressions bind data to HTML the same way as the ng-bind directive.
AngularJS will "output" data exactly where the expression is written.
AngularJS Example
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>


AngularJS Directives

AngularJS lets you extend HTML with new attributes called Directives.

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initialize application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-init="firstName='John'">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

</body>
</html>
Data Binding
The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.
Data binding in AngularJS, synchronizes AngularJS expressions with AngularJS data.
{{ firstName }} is synchronized with ng-model="firstName".
AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database.
Repeating HTML Elements
The ng-repeat directive repeats an HTML element:
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>Looping with objects:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>

Note
AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database.

The ng-app Directive

The ng-app directive defines the root element of an AngularJS application.
The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.
Later you will learn how ng-app can have a value (like ng-app="myModule"), to connect code modules.

The ng-init Directive

The ng-init directive defines initial values for an AngularJS application.
Normally, you will not use ng-init. You will use a controller or module instead.
You will learn more about controllers and modules later.

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-model directive can also:
  • Provide type validation for application data (number, email, required).
  • Provide status for application data (invalid, dirty, touched, error).
  • Provide CSS classes for HTML elements.
  • Bind HTML elements to HTML forms.

The ng-repeat Directive

The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

AngularJS Controllers

AngularJS controllers control the data of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.

AngularJS Controllers

AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
function personController($scope) {
    $scope.firstName = "Kumar",
    $scope.lastName = "Suresh"
}
</script>

</body>
</html>
Application explained:
The AngularJS application is defined by ng-app. The application runs inside a <div>.
The ng-controller directive names the controller object.
The personController function is a standard JavaScript object constructor.
AngularJS will invoke personController with a $scope object.
In AngularJS, $scope is the application object (the owner of application variables and functions).
The personController creates two properties (variables) in the scope (firstName and lastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).
Controller Methods
The example above demonstrated a controller object with two properties: lastName and firstName.
A controller can also have methods (functions as object properties):

AngularJS Filters

Filters can be added to expressions and directives using a pipe character.

AngularJS Filters

AngularJS filters can be used to transform data:
Filter
Description
currency
------Format a number to a currency format.
Filter                                                                  
------Select a subset of items from an array.
lowercase
------Format a string to lower case.
orderBy
------Orders an array by an expression.
uppercase
------Format a string to upper case.

Adding Filters to Expressions

A filter can be added to an expression with a pipe character (|) and a filter.
(For the next two examples we will use the person controller from the previous chapter)
The uppercase filter format strings to upper case:
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="personController">

<p>The name is {{ lastName | uppercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="personController">

<p>The name is {{ lastName | lowercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="costController">

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>

<script>
function costController($scope) {
    $scope.quantity = 1;
    $scope.price = 9.99;
}
</script>

</body>
</html>


<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="namesController">

<p>Looping with objects:</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>


<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="namesController">

<p>Filtering input:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>
Posted by at
Labels:

2 comments:

  1. geethuMay 5, 2016 at 2:08 AM

    Angularjs is the great javascript framework that has some compelling features not for developers but also for the designers. Angularjs is very essential for the web developers to know about its importance.
    Angularjs Training in Chennai | angularjs course in chennai

    ReplyDelete

Subscribe to: Post Comments (Atom)