Post on 19-May-2015
description
AngularJsAn introduction
Outline
● What is Angular● Why Angular● How Angular● Angular world vs JQuery world● Where to use● Where not to use● Why it is special
What is Angular
HTML enhanced for web apps!
What is Angular
A Javascript library that allows you to
● EXTEND the functionalities of HTML● model-view view-model BINDING● Segregate javascipt logic from HTML
rendering● Provides MVC framework for the messy
javascript
Why Angular
EXTEND the functionalities of HTML
HTML
Angular way<input size="30" type="richtext"/>
<input size="30" type="text" class="richtext"/>
Why Angular
WHY EXTEND the functionalities of HTML?● HTML is not enough, we need
○ Rich text○ Date picker○ Iterator for dynamic contents○ etc...
● HTML is build to show static data○ Angular makes HTML dynamic
Why Angular
model-view view-model BINDING
● Any changes in javascript model will impact the HTML view
● Any changes in HTML view will impact the javascript model
Why Angular
model-view view-model BINDING
HTML
Javascript
function CheckInsCtrl($scope) { $scope.checkIn = {start_date: '2013-02-13'};}
<input size="30" type="text" ng-model="checkIn.start_date"/>
Why Angular
Segregate javascipt logic from HTML rendering
Advantage● Helps to reuse logic as it is not coupled with
HTML DOM● Less coupling with the framework itself, as
the library written with plain javascript.
How Angular
HTML
● Add angular js in the header● Add ng-app in the body
<html> <head> <script src="angular.js"></script> </head> <body ng-app>
{{checkIn.rooms_count}} </body></html>
How Angular
Javascript
● Define controller and binding data
function CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0};}
Javascript
HTML
● Use {{}} to represent expression● Anguler is forgiving for expression evaluation
How Angular :: expression
function CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0};}
{{checkIn.rooms_count}}
How Angular :: binding
HTML
● Use ng-model to bind with controller data
<input ng-datepicker type="text" ng-model="checkIn.start_date"/><input ng-datepicker type="text" ng-model="checkIn.end_date"/><select ng-model="checkIn.night_counts"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> ...</select>
How Angular :: binding
Javascript
● Define model data
function CheckInsCtrl($scope) { $scope.checkIn = {start_date: '2013-02-16 12:00 AM', end_date: '2013-02-17 12:00 AM', night_counts: 1};}
How Angular :: watching
Javascript
Observe changes with $watchfunction CheckInsCtrl($scope) { $scope.checkIn = {start_date: '2013-02-16 12:00 AM', end_date: '2013-02-17 12:00 AM', night_counts: 1};
$scope.$watch('checkIn.start_date + checkIn.end_date', function () { if (isValidMoment($scope.checkIn.start_date) && isValidMoment($scope.checkIn.end_date)) { $scope.updateNightCount(); } });}
Angular world vs JQuery world
● Accessing angular from jquery● Accessing jquery from angular
Accessing angular from jquery
Dom generated by angular
A scope is defined at the root element.
<div ng-controller="CheckInsCtrl" class="ng-scope"> ....</div>
Accessing angular from jquery
Scope can be accessed as following,
But the elem should have the "ng-scope" class.Which denotes that there is a scope bound with that element.
var scope = $(elem).scope();
Accessing angular from jquery
Root scope is defined at the root element.
<div ng-controller="CheckInsCtrl" class="ng-scope"> ....</div>
var scope = $($('[ng-controller="CheckInsCtrl"]')[0]).scope();
Accessing jquery from angular
Angular can access dom by,● Angular directives
Where to use Angular
● Complex user end UI○ Where you have a lot of dom event and dom
manipulation● One page application
Where not to use Angular
● It is a overkill for simple application where you do not need a lot of client side logic
Why it is special
● The target of angular is uniq● It helps you to extend HTML
○ Add new attribute, element that the browser will understand
● It operates on dom, unlike other libraries that operates on template libraries(String based parsing)
● Can use a plain Javascript Hash for a model object, unlike EmberJs
References
● angularjs.org● slideshare.net/AgentK/angularjs-for-
designers-and-developers
Author
A.K.M. AshrafuzzamanLead Software Engineer,Tasawr Interactive
www.ashrafuzzaman.comzmn.ashraf@gmail.com