Bhabha Institute Of Technology

AngularJS
By Kandarp M Kashyap
IT 4th Year

Introduction
AngularJS is a complete JavaScript-based
open-source front-end web application framework .
It addresses many of the challenges encountered in
developing single-page applications.
It provides a framework for client-side
modelviewcontroller (MVC) and
modelviewviewmodel (MVVM) architectures

Some Facts ...

Miko Hevery, a Google employee, started to work with AngularJS in
2009.
AngularJS version 1.0 was released in 2012.
Now it is mainly maintained by Google
AngularJS is used on the websites of Wolfram Alpha, NBC, Walgreens,
Intel,Sprint, ABC News, and approximately 8,400 other sites out of 1
million tested in July 2015

Getting Started
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.4.8/angular.min.js"></script>

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
< !D O CTYPE htm l>
< htm l>
< script src= "http://ajax.googleapis.com /ajax/libs/angularjs/1.4.8/angular.m in.js"> < /script>
< body>
< div ng-app= "">
< p> N am e: < input type= "text" ng-m odel= "nam e"> < /p>
< p ng-bind= "nam e"> < /p>
< /div>
< /body>
< /htm l>

Directives,Expressions
AngularJS directives are HTML attributes with an ng prefix
The ng-init directive initializes AngularJS application variables
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
Ex:
<div ng-app="" ng-init="quantity=1">
Quantity: <input type="number" ng-model="quantity">
<p>The quantity is <span ng-bind="quantity"></span></p>
AngularJS expressions are written inside double braces: {{ expression }}
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive

More Directives
The ng-controller : the controller object for an application.
The ng-bind : binds the innerHTML of the element to the specified model property:
The ng-repeat : repeats an HTML element
The ng-click : specifies an expression to evaluate when an element is being clicked.
The ng-show : shows or hides HTML elements.
ng-hide,ng-focus,ng-dblclick,ng-checked etc
< div ng-app= "" ng-init= "nam es= ['Jani','H ege','Kai']">
< ul>
< ling-repeat= "x in nam es">
{{ x }}
< /li>
< /ul>
< /div>

Controller
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
< div ng-app= "m yApp" ng-controller= "personCtrl">
First N am e: < input type= "text" ng-m odel= "fi
rstN am e"> < br/> Last N am e: < input type= "text" ngm odel= "lastN am e">
FullN am e: {{fullN am e()}}
< /div>
< script>
var app = angular.m odule('m yApp', []);
app.controller('personCtrl', function($scope) {
$scope.fi
rstN am e = "John";
$scope.lastN am e = "D oe";
$scope.fullN am e = function() {
return $scope.fi
rstN am e + " " + $scope.lastN am e;
};
});
< /script>

The directive ng-controller="myCtrl" defines controller.

A controller can also have methods(fullName) apart from variables(firstName,lastName).

Scope
It is the binding part between the HTML (view) and the JavaScript (controller).
An object with the available properties and methods
Available for both the view and the controller.
$scope object is passed as an argument
< div ng-app= "m yApp" ng-controller= "m yCtrl">
< h1> {{carnam e}}< /h1>
< /div>
< script>
var app = angular.m odule('m yApp', []);
app.controller('m yCtrl', function($scope) {
$scope.carnam e = "Volvo";
});
< /script>

The view (HTML) gets access to these properties.

In the view, property name is used like {{carname}}

Data Binding
AngularJS' two-way data binding is its most notable feature.
Data binding in AngularJS is the synchronization between the model
and the view.
When data in the model changes, the view reflects the change, and
when data in the view changes, the model is updated as well.
The ng-model directive provides a two-way binding between the
model and the view.
Because of the immediate synchronization of the model and the view,
the controller can be completely separated from the view, and
simply concentrate on the model data.
The view will reflect any changes made in the controller

Filters
Filters can be added in AngularJS to format data.
Examples : currency,date,uppercase,lowercase,order by,filter.
Added to expressions by using the pipe character |, followed by a
filter.
< p> The nam e is {{ lastN am e | uppercase }}< /p>
< ul>
< ling-repeat= "x in nam es | orderBy:'country'">
{{ x.nam e + ', '+ x.country }}
< /li>
< /ul>

Services
Is a function, or object, that is available for, and limited to, your AngularJS application.
30 built-in services
$location,$http,$timeout,$interval
var app = angular.m odule('m yApp', []);
app.controller('custom ersCtrl', function($scope, $location) {
$scope.m yU rl= $location.absU rl();
});

Service is passed in to the controller as an argument

To use the service in the controller, it must be defined as a dependency.
Can create your own services

$http
$http is an AngularJS service for reading data from remote servers
Makes a request to the server, and returns a response
var app = angular.m odule('m yApp', []);
app.controller('m yCtrl', function($scope, $http) {
$http.get("w elcom e.htm ")
.then(function(response) {
//First function handles success
$scope.content = response.data;
}, function(response) {
//Second function handles error
$scope.content = "Som ething w ent w rong";
});
});

Different shortcut methods are get(),post(),delete(),put()

Events
Event listeners can be added to your HTML elements by using directives
ng-click,ng-dblclick,ng-focus,ng-blur,ng-keydown,ng-mousemove etc
< div ng-app= "m yApp" ng-controller= "m yCtrl">
< button ng-click= "count = count + 1"> Click m e!< /button>
< p> {{ count }}< /p>
< /div>
< script>
var app = angular.m odule('m yApp', []);
app.controller('m yCtrl', function($scope) {
$scope.count = 0;
});
< /script>

Queries ... ?

Thank You