WHA‽‽ YAPC::NA 2013 Brock Wilcox awwaiid@thelackthereof.org

deliriousattackInternet and Web Development

Dec 4, 2013 (3 years and 7 months ago)

72 views


AngularJS
WHA‽‽
YAPC::NA 2013
Brock Wilcox
awwaiid@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 HTML
vocabulary for your application."
$scope
$scope ties a (nested) instance of a controller
to 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 th
ings. I want to
show off my application, and I also want to teach some of the fundamentals of
AngularJS.
But they can get the fundamentals from the internet. More f
un than that -- I
want 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