Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Angular js - the beginning
Similar to Angular js - the beginning (20)
Recently uploaded
Recently uploaded (20)
Angular js - the beginning
- 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. What is Angular HTML enhanced for web apps!
- 4. 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
- 5. Why Angular EXTEND the functionalities of HTML HTML <input size="30" type="text" class="richtext"/> Angular way <input size="30" type="richtext"/>
- 6. 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
- 7. 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
- 8. Why Angular model-view view-model BINDING HTML <input size="30" type="text" ng-model="checkIn. start_date"/> Javascript function CheckInsCtrl($scope) { $scope.checkIn = {start_date: '2013-02-13'}; }
- 9. 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.
- 10. How Angular HTML <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. How Angular Javascript function CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0}; } ● Define controller and binding data
- 12. How Angular :: expression Javascript function CheckInsCtrl($scope) { $scope.checkIn = {rooms_count: 0}; } HTML {{checkIn.rooms_count}} ● Use {{}} to represent expression ● Anguler is forgiving for expression evaluation
- 13. How Angular :: binding HTML <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. How Angular :: binding Javascript function 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. How Angular :: watching Javascript Observe changes with $watch function 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. Angular world vs JQuery world ● Accessing angular from jquery ● Accessing jquery from angular
- 17. Accessing angular from jquery Dom generated by angular <div ng-controller="CheckInsCtrl" class="ng-scope"> .... </div> A scope is defined at the root element.
- 18. Accessing angular from jquery Scope 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 with that element.
- 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. Accessing jquery from angular Angular can access dom by, ● Angular directives
- 21. Where to use Angular ● Complex user end UI ○ Where you have a lot of dom event and dom manipulation ● One page application
- 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. 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. References ● angularjs.org ● slideshare.net/AgentK/angularjs-for- designers-and-developers
- 25. Author A.K.M. Ashrafuzzaman Lead Software Engineer, Tasawr Interactive www.ashrafuzzaman.com zmn.ashraf@gmail.com