Angular js - the beginning
5 likes2,203 views
AngularJS is a JavaScript framework that extends HTML and allows two-way data binding between the HTML and JavaScript. It helps separate JavaScript logic from HTML rendering. AngularJS makes HTML dynamic by allowing developers to extend HTML attributes and elements. Any changes to the model in JavaScript will update the view in HTML and vice versa. AngularJS also allows watching for changes to data and updating other parts of the model automatically. While it can access existing jQuery code, AngularJS has its own methods for manipulating the DOM and data binding that are preferred within the AngularJS framework. AngularJS is well suited for complex single page applications where there is significant client-side logic and DOM manipulation.
![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.](https://image.slidesharecdn.com/angularjs-thebeginning-130218041910-phpapp01/85/Angular-js-the-beginning-19-320.jpg)
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