angularjs - thelackthereof.org yapc-na angularjs/yapc-… · "html enhanced for web...

46
AngularJS WHA‽‽ YAPC::NA 2013 Brock Wilcox [email protected]

Upload: others

Post on 11-Jul-2020

20 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

AngularJSWHA‽‽

YAPC::NA 2013Brock [email protected]

Page 2: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

whoami

Page 3: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

whoami

Page 4: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

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

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

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

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

Template

Page 9: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

Directives

Page 10: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

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

$scope

Page 12: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

$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."

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

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

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

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."
Page 18: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."
Page 19: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

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

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

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

$watch

Page 23: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

WHA‽‽

Page 24: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

Startup

Page 25: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."
Page 26: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

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."
Page 28: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

Fancy.

Page 29: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

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

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

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

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

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

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

-- [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."

Services

Page 37: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

$http

Page 38: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

$resource

Page 39: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

(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."

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

Batarang

Page 42: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

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

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."
Page 45: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."
Page 46: AngularJS - thelackthereof.org YAPC-NA AngularJS/yapc-… · "HTML enhanced for web apps!" "AngularJS lets you extend HTML vocabulary for your application."

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