AngularJS

 

Introduction

AngularJS is a robust JavaScript Framework. AngularJS version 1.0 was released in 2012 by Misko Hevery, a Google employee.

Angular is a client-side MVW (Model-View-Whatever) JavaScript framework which gives us flexibility over design patterns when developing applications.

Features

  • AngularJS is a robust JavaScript based framework to create Rich Internet Application (RIA) and to build large scale based projects while keeping them as easy-to-maintain.
  • AngularJS provides developers options to write script in the MVC(Model View Controller) way.
  • AngularJS is a cross-browser compatible Scripting Language.
  • AngularJS is open source and completely free, licensed under the Apache License version 2.0.

Major Modules in AngularJS

Scope

Angular has a concept of scope which sits as one of the main Objects that powers the two way data-binding cycles to maintain application state.

Example of how we declare some data inside the Controller.

$scope.someValue = ‘Hello’;

To render it out in the DOM, we need to connect a Controller to some HTML and tell Angular where to bind the value.

<div ng-controller=”AppCtrl”>

{{ someValue }}

</div>

 

Controller

Controller allows us to interact with a View and Model, it’s the place where presentational logic can take place to keep the UI bindings in sync with the Model.

function MainCtrl ()

{

}

.module(‘app’, [])

.controller(‘MainCtrl’, MainCtrl);

 

 

Modules

Every application in Angular is created using modules. A module can have dependencies of other modules, or be a single module all by itself.

Services

AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.

Filters

Filters may useful while you are filtering list or data from your newly created array listing.

Directives

Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel…)

Example ng-if

Unlike ng-show or ng-hide, which uses a class to toggle element’s visibility on the page, ng-if actually destroys the DOM and the $scope it creates. If the element needs recreating due to value changes, Angular will create new $scope for that particular element. This also adds to improved performance, as removing elements via ng-if removes the $scope, which in turn lowers the $$watchers count inside Angular, speeding up further $digest cycles.

<div ng-if=”main.userExists”>

Please log in

</div>

ng-show/ng-hide

Using ng-show and ng-hide are often quite common to use within Angular, it’s a great way to show/ hide data based on a $scope property’s value.

To show an element, we might use an ng-click to bind a value to, and toggle it to show and hide the element.

<a href=” ng-click=”showMenu = !showMenu”>Toggle menu!</a>

<ul ng-show=”showMenu”>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

 

ng-click

The beauty of ng-click is that we don’t have to manually bind event listeners to multiple elements, Angular will evaluate the expression(s) inside the ng-click for us and bind the relevant listeners. This makes our development much faster, imagine binding event listeners and callbacks to DOM elements manually, adding and removing them whilst the DOM is destroyed and recreated on the fly. Unlike the old onclick=” attribute in HTML, Angular directives such as ng-click are scoped, and therefore are not global (which functions would need to be to be available for onclick).

<input type=”text” ng-model=”main.message”>

<a href=” ng-click=”main.showMessage(main.message);”>Show my message</a>

Templates

These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”.

Deep Linking

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Basic Example

<html ng-app>

<!– The first ng-App directive found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead –>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.min.js”></script>

</head>

<body>

// Angular JS expression

<p>{{ 4+5}}</p>

{{“Haryana” + ” India “}}

</body>

</html>

Output

Haryana India

Example – Data Binding

<html ng-app>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.min.js”></script>

</head>

<body>

<!– Data binding by ng-model

The ng-Model directive binds an input,select, textarea etc to a property on the scope using  –>

Enter Name : <input  type=”text” ng-model=”userid”> {{ userid }}

</body>

</html>

Example – Filters

<html ng-app>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.min.js”></script>

</head>

<body>

Enter Name : <input  type=”text” ng-model=”userid”>

{{ “Hello ” + userid  | uppercase }}

Enter Amount : <input  type=”text” ng-model=”amount”>

{{ amount  |currency }}

<h2>Calculations using ng-model</h2>

Quantity: <input type=”number” ng-model=”quantity”>

Price: <input type=”number” ng-model=”price”>

<p><b>Total Amount :</b> {{quantity * price | currency}}</p>

</body>

</html>

 

Example – Event Handler

<html ng-app>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.js”></script>

<script src=”angular.min.js”></script>

</head>

<body>

<h2>Handling click event</h2>

<!–ng-Click directive allows you to specify custom behavior when an element is clicked.–>

<button ng-click=”ct=ct+1″>Add Friend</button>

<br>

{{ ct }}

<button ng-click=”c=c+1″ ng-hide=”c>5″>Add Friend</button>

{{ c}}

<button ng-click=”c=c-1″ ng-hide =”c<1″>Remove Friend</button>

</body>

</html>

Example – Filters & Arrays

<html ng-app>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.min.js”></script>

</head>

<body>

<!– initialize (ng-init) on-ordered list using arrray called students  –>

<ul ng-init=”students=[‘Hirdesh Bhardwaj’,’Nidhi Singh’,’Ramaiya Kumar’,’Akanksha Sachan’,’Apoorva Adlakha’,’Kartik Populy’] “>

<!- print all elements of array using ng-repeat in for-each loop style –>

<li ng-repeat=”fr in students” >{{fr }} </li>

</ul>

<!– another example to print state in drop down box –>

<select ng-init=”states=[‘Haryana’,’Punjab’,’UP’,’MP’,’Gujrat’] “>

<option ng-repeat=”frs in states”>{{frs }}</option>

</select>

<h2> arrays with filters</h2>

<li ng-repeat=”fr in students | filter:X”>{{fr | uppercase }} </li>

<input ng-model=”X”>

</body>

</html>

 

Example – Scope

<html ng-app>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.min.js”></script>

</head>

<body>

<h2>Using Scope</h2>

<div class=”container” data-ng-controller=”mydata”>

<ul>

<li ng-repeat=”fr in friends” >{{fr.name }} </li>

</ul>

</div>

<div class=”MyDirective”>

<h1>{{myDirectiveData.title}}</h1>

<p>{{myDirectiveData.content}}</p>

</div>

<script>

$scope.myDirectiveData =

[ { title: “First title”, content: “First content” },

{ title: “Second title”, content: “Second content” } ];

</script>

<script>

function mydata($scope)

{

$scope.friends=[

{name:”hirdesh”,age:27},

{name:”Naveen”,age:26},

{name:”Jyoti”,age:26},

{name:”Nikhil”,age:26}

]

};

</script>

</body>

</html>

Example – Model

<html>

<head>

<script src=” angular.min.js”></script>

</head>

<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

<h1>{{firstname + ” ” + lastname}}</h1>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

$scope.firstname = “amit”;

$scope.lastname = “bhardwaj”;

});

</script>

</body>

</html>

 

Example – Controller

<html>

<head>

<script src=” angular.min.js”></script>

</head>

<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

<ul>

<li ng-repeat=”x in names”>{{x}}</li>

</ul>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

$scope.names = [“hirdesh”, “pooja”, “amit”, “shikha”];

});

</script>

</body>

</html>

Example – Table

<html>

<head>

<style>

table, th , td

{

border: 1px solid grey;

border:solid 1 px red;

padding: 5px;

}

</style>

<script src=” angular.min.js”></script>

</head>

<body>

<div ng-app=”myApp” ng-controller=”customersCtrl”>

<table>

<tr ng-repeat=”x in names”>

<td>{{ $index + 1 }}</td>

<td>{{ x.Name }}</td>

<td>{{ x.State }}</td>

</tr>

</table>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘customersCtrl’, function($scope, $http) {

$http.get(“data.php”)

.then(function (response) {$scope.names = response.data.records;});

});

</script>

</body>

</html>

data.php

{

“records”:[

{“Name”:”Shikha Ahuja”,”City”:”Gurgaon”,”State”:”Haryana”},

{“Name”:”Hirdesh Bhardwaj”,”City”:”Gurgaon”,”State”:”Haryana”},

{“Name”:”Ashu Arora”,”City”:”Noida”,”State”:”Uttar Pradesh”},

{“Name”:”Akanksha”,”City”:”Delhi”,”State”:”Delhi”},

{“Name”:”Rakhi Sehrawat”,”City”:”Jhajjar”,”State”:”Haryana”},

{“Name”:”Neha”,”City”:”Gurgaon”,”State”:”Haryana”},

{“Name”:”Shikha Ahuja”,”City”:”Gurgaon”,”State”:”Haryana”}

]

}

****************

 

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/02/20/angularjs/
YouTube31
YouTube