Your SlideShare is downloading. ×
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS Introduction

5,085

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. …

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
1 Like
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
5,085
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
59
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ANGULARJS INTRO @AJSZRH
  • 2. GRACIAS!
  • 3. AGENDA - Where are we? - AngularJS - Let’s build something - Future of this group
  • 4. SOME BACKGROUND
  • 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. 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. DIRECTIVES & DATA BINDING
  • 8. DIRECTIVES AngularJS lets you extend HTML vocabulary for your application. ng-app boostraps angular ng-init directive ng-model directive
  • 9. LET’S START CODING SOMETHING DIRECTIVES & DATA BINDING
  • 10. DATA BINDING Synchronization of data between the model and view components docs.angularjs.org
  • 11. GET REAL! EXAMPLE APP
  • 12. PIZZERIA …
  • 13. FILTERS CONTROLLER 1 CONTROLLER 2 SERVICE $HTTP
  • 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. SERVICE $HTTP Core Angular service connects to remote HTTP servers Inject $http Use it to get data!
  • 16. SHOP EXAMPLE VIEWS, CONTROLLERS & SCOPE
  • 17. FILTERS Filters format the value of an expression for display. data filter with argument filter without argument many filters to expression
  • 18. SHOP EXAMPLE FILTERS
  • 19. SERVICES Services are used to communicate controllers Register service Define functions Return instance Inject in controllers
  • 20. SHOP EXAMPLE SERVICES
  • 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. LEARN, SHARE & BUILD
  • 23. MANY THANKS http://about.me/Carlos_Morales
  • 24. BEHIND THE SCENES Initialization docs.angularjs.org

×