View
32
Download
1
Category
Preview:
Citation preview
AngularJSWHA‽‽
YAPC::NA 2013Brock Wilcoxawwaiid@thelackthereof.org
whoami
whoami
Hello World
Hello World
<html ng-app> ···</html>
<h2>Hello {{username}}</h2>
Name: <input ng-model="username">
Template
Directives
"HTML enhanced for web apps!"
"AngularJS lets you extend HTMLvocabulary for your application."
$scope
$scope ties a (nested) instance of a controllerto a piece of the template (DOM)
Two Way Data-Binding
Controller is a function
function simpleControllerA() {}
function simpleControllerA($scope) { $scope.username = 'Joe';}···<div ng-controller=simpleControllerA> <h2>Hello {{username}}</h2> Name: <input ng-model="username"/></div>
Concepts:
· view / template· model / $scope· controller· module· service· directives· $watch· filter· dependency $injector
Controller Actions
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>
$watch
WHA‽‽
Startup
Runtime(main loop)
Fancy.
Dependency Injection
function myController($scope) { ···}
function myController($scope, $http) { ···}
function myController($http, $scope) { ···}
myModule.controller( 'myController', ['$http', '$scope'], function($http, $scope) { ··· });
f.toString()
-- [concepts-module-injector.png] [fit]
Services
$http
$resource
(WIP application example)
Custom Directives
Batarang
Resources· The Internets· angularjs.org· AngularJS Meetups· O'Reilly book· ngmodules.org
THE END
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
Recommended