• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
AngularJS Intro for @AjsZrh
 

AngularJS Intro for @AjsZrh

on

  • 1,892 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
1,892
Views on SlideShare
580
Embed Views
1,312

Actions

Likes
0
Downloads
40
Comments
1

5 Embeds 1,312

http://www.scoop.it 1307
http://www.google.co.uk 2
http://www.google.com 1
http://webcache.googleusercontent.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

11 of 1 previous next

  • 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