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

1. ANGULARJS
INTRO
@AJSZRH

2. GRACIAS!

3. AGENDA
- Where are we?
- AngularJS
- Let’s build something
- Future of this group

4. SOME BACKGROUND

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

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

10. DIRECTIVES & DATA BINDING

11. DIRECTIVES
AngularJS lets you extend HTML vocabulary for your application.
ng-app
boostraps angular
ng-init directive
ng-model directive

12. LET’S START CODING SOMETHING
DIRECTIVES & DATA BINDING

13. DATA BINDING
Synchronization of data between the model and view components
docs.angularjs.org

14. GET REAL!
EXAMPLE APP

15. PIZZERIA …

16. FILTERS
CONTROLLER 1
CONTROLLER 2
SERVICE
$HTTP

17. VIEWS, CONTROLLERS & SCOPE
Business logic needed for each single view
VIEW
Define module
CONTROLLER
Define controller
$scope the glue between
application controller and view

18. SERVICE $HTTP
Core Angular service connects to remote HTTP servers
Inject $http
Use it to get data!

19. SHOP EXAMPLE
VIEWS, CONTROLLERS & SCOPE

20. FILTERS
Filters format the value of an expression for display.
data
filter with argument
filter without argument
many filters to
expression

21. SHOP EXAMPLE
FILTERS

22. SERVICES
Services are used to communicate controllers
Register service
Define functions
Return instance
Inject in controllers

23. SHOP EXAMPLE
SERVICES

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

25. LEARN, SHARE & BUILD

26. MANY
THANKS
http://about.me/Carlos_Morales

27. BEHIND THE SCENES
Initialization
docs.angularjs.org