AngularJS Intro for @AjsZrh
Upcoming SlideShare
Loading in...5
×
 

AngularJS Intro for @AjsZrh

on

  • 2,539 views

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. AngularJS is an open-source JavaScript framework from Google that makes developing rich web applications much easier.
Code can be found at https://github.com/carlos-/ajs-intro

Statistics

Views

Total Views
2,539
Views on SlideShare
723
Embed Views
1,816

Actions

Likes
0
Downloads
48
Comments
1

5 Embeds 1,816

http://www.scoop.it 1810
http://www.google.co.uk 2
http://webcache.googleusercontent.com 2
http://www.google.com 1
http://www.google.de 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 Intro for @AjsZrh AngularJS Intro for @AjsZrh Presentation Transcript

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