Angular js - the beginning


Published on

Introduction to angularjs

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Angular js - the beginning

  1. 1. AngularJsAn introduction
  2. 2. Outline● What is Angular● Why Angular● How Angular● Angular world vs JQuery world● Where to use● Where not to use● Why it is special
  3. 3. What is Angular HTML enhanced for web apps!
  4. 4. What is AngularA 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
  5. 5. Why AngularEXTEND the functionalities of HTMLHTML<input size="30" type="text" class="richtext"/>Angular way<input size="30" type="richtext"/>
  6. 6. Why AngularWHY 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
  7. 7. Why Angularmodel-view view-model BINDING● Any changes in javascript model will impact the HTML view● Any changes in HTML view will impact the javascript model
  8. 8. Why Angularmodel-view view-model BINDINGHTML<input size="30" type="text" ng-model="checkIn.start_date"/>Javascriptfunction CheckInsCtrl($scope) { $scope.checkIn = {start_date: 2013-02-13};}
  9. 9. Why AngularSegregate javascipt logic from HTMLrenderingAdvantage● 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.
  10. 10. How AngularHTML<html> <head> <script src="angular.js"></script> </head> <body ng-app> {{checkIn.rooms_count}} </body></html>● Add angular js in the header● Add ng-app in the body
  11. 11. How AngularJavascriptfunction CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0};}● Define controller and binding data
  12. 12. How Angular :: expressionJavascriptfunction CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0};}HTML{{checkIn.rooms_count}}● Use {{}} to represent expression● Anguler is forgiving for expression evaluation
  13. 13. How Angular :: bindingHTML<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>● Use ng-model to bind with controller data
  14. 14. How Angular :: bindingJavascriptfunction CheckInsCtrl($scope) { $scope.checkIn = {start_date: 2013-02-16 12:00 AM, end_date: 2013-02-17 12:00 AM, night_counts: 1};}● Define model data
  15. 15. How Angular :: watchingJavascriptObserve 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(); } });}
  16. 16. Angular world vs JQuery world● Accessing angular from jquery● Accessing jquery from angular
  17. 17. Accessing angular from jqueryDom generated by angular<div ng-controller="CheckInsCtrl" class="ng-scope"> ....</div>A scope is defined at the root element.
  18. 18. Accessing angular from jqueryScope can be accessed as following,var scope = $(elem).scope();But the elem should have the "ng-scope"class.Which denotes that there is a scope bound withthat element.
  19. 19. Accessing angular from jquery<div ng-controller="CheckInsCtrl" class="ng-scope"> ....</div>var scope = $($([ng-controller="CheckInsCtrl"])[0]).scope();Root scope is defined at the root element.
  20. 20. Accessing jquery from angularAngular can access dom by,● Angular directives
  21. 21. Where to use Angular● Complex user end UI ○ Where you have a lot of dom event and dom manipulation● One page application
  22. 22. Where not to use Angular● It is a overkill for simple application where you do not need a lot of client side logic
  23. 23. 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
  24. 24. References●● designers-and-developers
  25. 25. AuthorA.K.M. AshrafuzzamanLead Software Engineer,Tasawr