Slide 1
Slide 1 text
Wrocław, 28.01.2013
Slide 2
Slide 2 text
ABOUT ME
Tymon Tobolski
B @iteamon
H teamon.eu
G teamon
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
HTML++
Slide 6
Slide 6 text
HTTP = EVENT
WEBAPP = STATE
Slide 7
Slide 7 text
ONE-WAY DATA BINDING
View
Template Model
merge
Slide 8
Slide 8 text
BACKBONE & FRIENDS
View
Template
Model
View
Template
Router Model
Model
Slide 9
Slide 9 text
BINDING MESS
View Model
Template
Slide 10
Slide 10 text
EVENT HANDLING
class MyView extends Backbone.View
events:
"click #my-button": "handler"
handler: (e) =>
alert("Click!")
Slide 11
Slide 11 text
EVENT HANDLING
$("#my-button").click (e) =>
alert("Click!")
Slide 12
Slide 12 text
ONE-WAY DATA BINDING
View
Template Model
merge
?
Slide 13
Slide 13 text
TWO-WAY DATA BINDING
View
Template
Model
compile
instant update
Slide 14
Slide 14 text
Hello {{ name }}!
Slide 15
Slide 15 text
Controllers business logic
Directives DOM manipulation
Filters output manipulation
Services external dependencies
ARCHITECTURE
Slide 16
Slide 16 text
app = angular.module('myapp', [])
app.controller 'ItemsCtrl', ($scope) ->
$scope.items = [
{name: "Item A"}
{name: "Item B"}
]
$scope.newName = ""
$scope.add = () ->
$scope.items.push({name: $scope.newName})
$scope.newName = ""
angular.bootstrap(document, ['myapp'])
{{ item.name }}
+
http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
Slide 17
Slide 17 text
app = angular.module('myapp', [])
app.controller 'ItemsCtrl', ($scope) ->
$scope.items = [
{name: "Item A"}
{name: "Item B"}
]
$scope.newName = ""
$scope.add = () ->
$scope.items.push({name: $scope.newName})
$scope.newName = ""
angular.bootstrap(document, ['myapp'])
{{ item.name }}
+
http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
DIRECTIVES
user “events”
ng-click
ng-change
ng-submit
ng-mouse*
state reflection
ng-hide
ng-model
ng-repeat
ng-style
Slide 20
Slide 20 text
DIRECTIVES
angular-ui.github.com
Slide 21
Slide 21 text
DIRECTIVES
angular-ui.github.com
custom UI directive
Slide 22
Slide 22 text
FILTERS
$scope.value = 20000
{{ value | currency }}
Slide 23
Slide 23 text
FILTERS
$scope.value = 20000
{{ value | currency }}
filter
Slide 24
Slide 24 text
FILTERS
currency
date
json
lowercase
uppercase
number
orderBy
Slide 25
Slide 25 text
SERVICES
$http
$resource REST
$locale i18n
$location
$q Promise
$scope
$routeParams
Slide 26
Slide 26 text
ROUTING
app.config ($routeProvider) ->
$routeProvider.
when('/', {controller: IndexCtrl,
templateUrl: 'index.html'}).
when('/edit/:id', {controller: EditCtrl,
templateUrl: 'edit.html'}).
when('/new', {controller: NewCtrl,
templateUrl: 'new.html'}).
otherwise({redirectTo:'/'})
Slide 27
Slide 27 text
$scope.items = Item.query()
CALLBACK ARE BAD
Promise (deffered)
http://docs.angularjs.org/api/ng.$q
Slide 28
Slide 28 text
Questions?
k
Slide 29
Slide 29 text
RESOURCES
HOMEPAGE
http://angularjs.org
CONCEPTUAL MUST READ:
http://docs.angularjs.org/guide/concepts
TUTORIAL:
http://docs.angularjs.org/tutorial/