AngularJS Introduction
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AngularJS Introduction

on

  • 3,217 views

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

Statistics

Views

Total Views
3,217
Views on SlideShare
935
Embed Views
2,282

Actions

Likes
1
Downloads
56
Comments
1

6 Embeds 2,282

http://www.scoop.it 2273
http://webcache.googleusercontent.com 3
http://www.google.com 2
http://www.google.co.uk 2
http://www.google.de 1
http://www.caksha.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • the code can be found at https://github.com/carlos-/ajs-intro
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AngularJS Introduction Presentation 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