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 JavaS...
WHAT IS ANGULARJS
HTML enhanced for web apps!
AngularJS is NOT
-  Library
-  Does not abstract away HTML, CSS or JS
Angula...
DIRECTIVES & DATA BINDING
DIRECTIVES
AngularJS lets you extend HTML vocabulary for your application.
ng-app
boostraps angular

ng-init directive

ng...
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
...
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 f...
SHOP EXAMPLE
FILTERS
SERVICES
Services are used to communicate controllers
Register service

Define functions

Return instance

Inject in contr...
SHOP EXAMPLE
SERVICES
FUTURE TOPICS
-  Routing
-  Support framework: yeoman, grunt, bower
-  Testing: Unit testing vs. e2e testing. Karma, Yasmi...
LEARN, SHARE & BUILD
MANY
THANKS
http://about.me/Carlos_Morales
BEHIND THE SCENES
Initialization

docs.angularjs.org
AngularJS Introduction
AngularJS Introduction
AngularJS Introduction
Upcoming SlideShare
Loading in...5
×

AngularJS Introduction

5,753

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
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,753
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
61
Comments
1
Likes
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×