Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript for Designers

Twitter @dgoutam
History
• Origins within Google, invented by Misko
Hevery
• Open-sourced 2009
• 17,000 lines in 6 months => 1,500 in 3 wee...
Killer Features
•
•
•
•

Two-way binding
Declarative coding for UI
Teaching HTML new tricks
Separation of model & view, No...
http://angularjs.org
ng-app, expression binding
ng-app, expression binding
• Include angular.js or angular.min.js
• Add ng-app declarative where you want
Angular to manag...
How does it work
• Compile: traverse the DOM and collect all of
the directives. The result is a linking function.
• Link: ...
ngModel, binding variables
• 02-ngModel
• ng-model binds variable data. It can be
declared on input, select, textarea, etc...
Two-way data binding
Jquery vs Angular
Differences from jQuery
• Declarative code, not imperative (explicitly
stating, say with functions, what action needs
to b...
More expressions
Expressions
• Expressions can be embedded anywhere
• … even for class values
• There are special filters that you can use
...
MVC
Scope and Controller
Learnings
• Controller objects can separate data and
functionality
– There can be many controllers

• ‘$scope’ is injected...
Scope, Controller, View
How AngularJS does MVC
Dependency Injection
Method on Scope
ngClick
ngRepeat
ngRepeat
Filters
Other inbuilt filters
Modules in AngularJS
• Third party code can be packaged as reusable
modules.
• The modules can be loaded in any/parallel
o...
ngView and Routing
$http
$http
• Make AJAX calls with $http
• It returns deferred promises
– More in later workshops

• You can handle ‘success’ an...
Working with angular-seed
• https://github.com/angular/angular-seed
• You need to have node.js installed to test
Custom Filter
Custom Directive
What we didn’t cover
•
•
•
•
•

Unit testing, E2E testing
Custom directives beyond basics
$apply and digest cycles
$q and ...
Resources
•
•
•
•
•
•
•

angularjs.org
Google Groups: AngularJS
Google+: AngularJS
ngmodules.org
Github: angular-ui.github...
Angularjs for kolkata drupal meetup
Upcoming SlideShare
Loading in …5
×

Angularjs for kolkata drupal meetup

3,899 views

Published on

Published in: Technology
  • Be the first to comment

Angularjs for kolkata drupal meetup

  1. 1. Javascript for Designers Twitter @dgoutam
  2. 2. History • Origins within Google, invented by Misko Hevery • Open-sourced 2009 • 17,000 lines in 6 months => 1,500 in 3 weeks
  3. 3. Killer Features • • • • Two-way binding Declarative coding for UI Teaching HTML new tricks Separation of model & view, No DOM/View manipulation, less code • Great for CRUD based single page apps • Awesome adoption and great community • Unit testable, E2E testable
  4. 4. http://angularjs.org
  5. 5. ng-app, expression binding
  6. 6. ng-app, expression binding • Include angular.js or angular.min.js • Add ng-app declarative where you want Angular to manage app (typically <html> or <body>) • Expression binding with {{ }} • ng-app can also be written as ngApp • Use camel case in JavaScript code (ngApp) and use snake case in html (ng-app)
  7. 7. How does it work • Compile: traverse the DOM and collect all of the directives. The result is a linking function. • Link: combine the directives with a scope and produce a live view.
  8. 8. ngModel, binding variables • 02-ngModel • ng-model binds variable data. It can be declared on input, select, textarea, etc.
  9. 9. Two-way data binding
  10. 10. Jquery vs Angular
  11. 11. Differences from jQuery • Declarative code, not imperative (explicitly stating, say with functions, what action needs to be performed) • Automatic data binding • No direct DOM manipulation
  12. 12. More expressions
  13. 13. Expressions • Expressions can be embedded anywhere • … even for class values • There are special filters that you can use (currency) • Values are automatically bound
  14. 14. MVC
  15. 15. Scope and Controller
  16. 16. Learnings • Controller objects can separate data and functionality – There can be many controllers • ‘$scope’ is injected by AngularJS • $scope.data in the controller is referred to as simply data in html • Dot notation for object members works (person.age) – In fact, this is suggested practice
  17. 17. Scope, Controller, View
  18. 18. How AngularJS does MVC
  19. 19. Dependency Injection
  20. 20. Method on Scope
  21. 21. ngClick
  22. 22. ngRepeat
  23. 23. ngRepeat
  24. 24. Filters
  25. 25. Other inbuilt filters
  26. 26. Modules in AngularJS • Third party code can be packaged as reusable modules. • The modules can be loaded in any/parallel order (due to delayed nature of module execution). • Some Angular modules are in separate files: Eg. ngRoute is in angularjs-route.min.js
  27. 27. ngView and Routing
  28. 28. $http
  29. 29. $http • Make AJAX calls with $http • It returns deferred promises – More in later workshops • You can handle ‘success’ and ‘error’
  30. 30. Working with angular-seed • https://github.com/angular/angular-seed • You need to have node.js installed to test
  31. 31. Custom Filter
  32. 32. Custom Directive
  33. 33. What we didn’t cover • • • • • Unit testing, E2E testing Custom directives beyond basics $apply and digest cycles $q and promises Service, Factory, Provider
  34. 34. Resources • • • • • • • angularjs.org Google Groups: AngularJS Google+: AngularJS ngmodules.org Github: angular-ui.github.io Google+: AngularJS India https://www.facebook.com/groups/25576918 4523171/

×