angular js - the beginning
DESCRIPTION
Introduction to angularjsTRANSCRIPT
![Page 1: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/1.jpg)
AngularJsAn introduction
![Page 2: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/2.jpg)
Outline
● What is Angular● Why Angular● How Angular● Angular world vs JQuery world● Where to use● Where not to use● Why it is special
![Page 3: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/3.jpg)
What is Angular
HTML enhanced for web apps!
![Page 4: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/4.jpg)
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
![Page 5: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/5.jpg)
Why Angular
EXTEND the functionalities of HTML
HTML
Angular way<input size="30" type="richtext"/>
<input size="30" type="text" class="richtext"/>
![Page 6: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/6.jpg)
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
![Page 7: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/7.jpg)
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
![Page 8: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/8.jpg)
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"/>
![Page 9: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/9.jpg)
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.
![Page 10: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/10.jpg)
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>
![Page 11: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/11.jpg)
How Angular
Javascript
● Define controller and binding data
function CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0};}
![Page 12: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/12.jpg)
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}}
![Page 13: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/13.jpg)
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>
![Page 14: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/14.jpg)
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};}
![Page 15: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/15.jpg)
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(); } });}
![Page 16: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/16.jpg)
Angular world vs JQuery world
● Accessing angular from jquery● Accessing jquery from angular
![Page 17: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/17.jpg)
Accessing angular from jquery
Dom generated by angular
A scope is defined at the root element.
<div ng-controller="CheckInsCtrl" class="ng-scope"> ....</div>
![Page 18: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/18.jpg)
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();
![Page 19: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/19.jpg)
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();
![Page 20: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/20.jpg)
Accessing jquery from angular
Angular can access dom by,● Angular directives
![Page 21: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/21.jpg)
Where to use Angular
● Complex user end UI○ Where you have a lot of dom event and dom
manipulation● One page application
![Page 22: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/22.jpg)
Where not to use Angular
● It is a overkill for simple application where you do not need a lot of client side logic
![Page 23: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/23.jpg)
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
![Page 24: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/24.jpg)
References
● angularjs.org● slideshare.net/AgentK/angularjs-for-
designers-and-developers
![Page 25: Angular js - the beginning](https://reader034.vdocuments.net/reader034/viewer/2022042521/555a5fb0d8b42a47748b527e/html5/thumbnails/25.jpg)
Author
A.K.M. AshrafuzzamanLead Software Engineer,Tasawr Interactive