AngularJS Introduction

7,814 views
8,048 views

Published on

AngularJS is an open-source JavaScript framework from Google that makes developing rich web applications much easier. Slides used in the fisrt AngularJS Zürich Meetup.
Code can be found at https://github.com/carlos-/ajs-intro

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • the code can be found at https://github.com/carlos-/ajs-intro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,814
On SlideShare
0
From Embeds
0
Number of Embeds
5,879
Actions
Shares
0
Downloads
67
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

AngularJS Introduction

  1. 1. ANGULARJS INTRO @AJSZRH
  2. 2. GRACIAS!
  3. 3. AGENDA - Where are we? - AngularJS - Let’s build something - Future of this group
  4. 4. SOME BACKGROUND
  5. 5. Static HTML Dynamic HTML HTML + CSS + JavaScript Dynamic web pages Server rendered the HTML pages Ajax: Asynchronous JavaScript XML DOM manipulation Model View ViewModel (MVVM) The Single-Page App
  6. 6. WHAT IS ANGULARJS HTML enhanced for web apps! AngularJS is NOT -  Library -  Does not abstract away HTML, CSS or JS AngularJS is -  JavaScript Framework -  Extends HTML into more readable format -  Reduces DOM manipulation -  Allows easier testing
  7. 7. DIRECTIVES & DATA BINDING
  8. 8. DIRECTIVES AngularJS lets you extend HTML vocabulary for your application. ng-app boostraps angular ng-init directive ng-model directive
  9. 9. LET’S START CODING SOMETHING DIRECTIVES & DATA BINDING
  10. 10. DATA BINDING Synchronization of data between the model and view components docs.angularjs.org
  11. 11. GET REAL! EXAMPLE APP
  12. 12. PIZZERIA …
  13. 13. FILTERS CONTROLLER 1 CONTROLLER 2 SERVICE $HTTP
  14. 14. VIEWS, CONTROLLERS & SCOPE Business logic needed for each single view VIEW Define module CONTROLLER Define controller $scope the glue between application controller and view
  15. 15. SERVICE $HTTP Core Angular service connects to remote HTTP servers Inject $http Use it to get data!
  16. 16. SHOP EXAMPLE VIEWS, CONTROLLERS & SCOPE
  17. 17. FILTERS Filters format the value of an expression for display. data filter with argument filter without argument many filters to expression
  18. 18. SHOP EXAMPLE FILTERS
  19. 19. SERVICES Services are used to communicate controllers Register service Define functions Return instance Inject in controllers
  20. 20. SHOP EXAMPLE SERVICES
  21. 21. FUTURE TOPICS -  Routing -  Support framework: yeoman, grunt, bower -  Testing: Unit testing vs. e2e testing. Karma, Yasmine -  Talking to server -  Security: authentication and authorization -  Angular services -  Building Forms -  i18n and l10n -  Animations -  Directives -  Building phone apps with AngularJS
  22. 22. LEARN, SHARE & BUILD
  23. 23. MANY THANKS http://about.me/Carlos_Morales
  24. 24. BEHIND THE SCENES Initialization docs.angularjs.org

×