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,542 views
3,373 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,542
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • they start with an anecdote, discussing how they were working on a web application at Google. They have already written 17000 lines of code in about 6 months and it was almost finished, albeit with great frustration related to development speed and testability. This guy, Miško Hevery, tells everyone that by using a framework that he wrote in his spare time (you gotta love devs!) they could rewrite the whole application in two weeks. He was wrong, they did it in three weeks and at the end the whole thing has only 1500 lines of code and was fully testable.
    90% less code, in 90% less time. And it was very testable.
  • Compiler
    Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens into two phases.
    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. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. Making the scope model a single source of truth.
    Some directives such ng-repeat clone DOM elements once for each item in collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
  • http://slid.es/neenhouse/dependency-injection-in-angularjs
  • 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/

    ×