angularjs - thelackthereof.org yapc-na angularjs/yapc-… · "html enhanced for web...
TRANSCRIPT
![Page 2: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/2.jpg)
whoami
![Page 3: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/3.jpg)
whoami
![Page 4: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/4.jpg)
Hello World
![Page 5: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/5.jpg)
Hello World
![Page 6: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/6.jpg)
<html ng-app> ···</html>
![Page 7: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/7.jpg)
<h2>Hello {{username}}</h2>
Name: <input ng-model="username">
![Page 8: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/8.jpg)
Template
![Page 9: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/9.jpg)
Directives
![Page 10: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/10.jpg)
"HTML enhanced for web apps!"
"AngularJS lets you extend HTMLvocabulary for your application."
![Page 11: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/11.jpg)
$scope
![Page 12: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/12.jpg)
$scope ties a (nested) instance of a controllerto a piece of the template (DOM)
![Page 13: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/13.jpg)
Two Way Data-Binding
![Page 14: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/14.jpg)
Controller is a function
![Page 15: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/15.jpg)
function simpleControllerA() {}
![Page 16: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/16.jpg)
function simpleControllerA($scope) { $scope.username = 'Joe';}···<div ng-controller=simpleControllerA> <h2>Hello {{username}}</h2> Name: <input ng-model="username"/></div>
![Page 17: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/17.jpg)
![Page 18: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/18.jpg)
![Page 19: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/19.jpg)
Concepts:
· view / template· model / $scope· controller· module· service· directives· $watch· filter· dependency $injector
![Page 20: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/20.jpg)
Controller Actions
![Page 21: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/21.jpg)
function simpleControllerA($scope) { $scope.username = 'Joe'; $scope.capitalize = function() { $scope.username = $scope.username.toUpperCase(); }}···<div ng-controller=simpleControllerA> <h2>Hello {{username}}</h2> Name: <input ng-model="username"/> <button ng-click="capitalize()">BIG</button></div>
![Page 22: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/22.jpg)
$watch
![Page 23: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/23.jpg)
WHA‽‽
![Page 24: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/24.jpg)
Startup
![Page 25: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/25.jpg)
![Page 26: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/26.jpg)
Runtime(main loop)
![Page 27: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/27.jpg)
![Page 28: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/28.jpg)
Fancy.
![Page 29: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/29.jpg)
Dependency Injection
![Page 30: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/30.jpg)
function myController($scope) { ···}
![Page 31: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/31.jpg)
function myController($scope, $http) { ···}
![Page 32: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/32.jpg)
function myController($http, $scope) { ···}
![Page 33: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/33.jpg)
myModule.controller( 'myController', ['$http', '$scope'], function($http, $scope) { ··· });
![Page 34: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/34.jpg)
f.toString()
![Page 35: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/35.jpg)
-- [concepts-module-injector.png] [fit]
![Page 36: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/36.jpg)
Services
![Page 37: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/37.jpg)
$http
![Page 38: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/38.jpg)
$resource
![Page 39: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/39.jpg)
(WIP application example)
![Page 40: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/40.jpg)
Custom Directives
![Page 41: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/41.jpg)
Batarang
![Page 42: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/42.jpg)
Resources· The Internets· angularjs.org· AngularJS Meetups· O'Reilly book· ngmodules.org
![Page 43: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/43.jpg)
THE END
![Page 44: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/44.jpg)
![Page 45: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/45.jpg)
![Page 46: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."](https://reader033.vdocuments.mx/reader033/viewer/2022042611/5f39ad8cd4cb814bc94702a8/html5/thumbnails/46.jpg)
So... what do I want to say here? I guess I want to do a few things. I want toshow off my application, and I also want to teach some of the fundamentals ofAngularJS.
But they can get the fundamentals from the internet. More fun than that -- Iwant to teach about what is NEAT and especially what is HACKISH or magical.
Dependencies via f.toString() . That is pretty friggin fun!
Several DSLs:* Extending HTML* Expressions in double-curleys
* Promises* Resources use a little pattern for $save