angularjs introduction
DESCRIPTION
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-introTRANSCRIPT
![Page 1: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/1.jpg)
ANGULARJS INTRO @AJSZRH
![Page 2: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/2.jpg)
GRACIAS!
![Page 3: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/3.jpg)
- Where are we? - AngularJS - Let’s build something - Future of this group
AGENDA
![Page 4: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/4.jpg)
SOME BACKGROUND
![Page 5: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/5.jpg)
![Page 6: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/6.jpg)
![Page 7: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/7.jpg)
![Page 8: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/8.jpg)
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
![Page 9: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/9.jpg)
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
![Page 10: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/10.jpg)
DIRECTIVES & DATA BINDING
![Page 11: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/11.jpg)
AngularJS lets you extend HTML vocabulary for your application.
DIRECTIVES
ng-app boostraps angular
ng-init directive
ng-model directive
![Page 12: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/12.jpg)
LET’S START CODING SOMETHING DIRECTIVES & DATA BINDING
![Page 13: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/13.jpg)
DATA BINDING
docs.angularjs.org
Synchronization of data between the model and view components
![Page 14: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/14.jpg)
GET REAL! EXAMPLE APP
![Page 15: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/15.jpg)
PIZZERIA …
![Page 16: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/16.jpg)
FILTERS CONTROLLER 1 CONTROLLER 2
SERVICE
$HTTP
![Page 17: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/17.jpg)
VIEWS, CONTROLLERS & SCOPE Business logic needed for each single view
Define module
Define controller
$scope the glue between application controller and view
VIE
W
CO
NTR
OLL
ER
![Page 18: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/18.jpg)
SERVICE $HTTP Core Angular service connects to remote HTTP servers
Inject $http
Use it to get data!
![Page 19: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/19.jpg)
SHOP EXAMPLE VIEWS, CONTROLLERS & SCOPE
![Page 20: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/20.jpg)
FILTERS Filters format the value of an expression for display.
data
many filters to expression
filter with argument
filter without argument
![Page 21: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/21.jpg)
SHOP EXAMPLE FILTERS
![Page 22: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/22.jpg)
SERVICES Services are used to communicate controllers
Register service
Define functions
Return instance
Inject in controllers
![Page 23: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/23.jpg)
SHOP EXAMPLE SERVICES
![Page 24: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/24.jpg)
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
![Page 25: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/25.jpg)
LEARN, SHARE & BUILD
![Page 26: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/26.jpg)
MANY THANKS http://about.me/Carlos_Morales
![Page 27: AngularJS Introduction](https://reader033.vdocuments.net/reader033/viewer/2022052505/554be4c9b4c9055a368b483b/html5/thumbnails/27.jpg)
BEHIND THE SCENES Initialization
docs.angularjs.org