Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Angular.js
Tymon Tobolski
January 28, 2013
Programming
7
1.1k
Angular.js
Tymon Tobolski
January 28, 2013
Tweet
Share
More Decks by Tymon Tobolski
See All by Tymon Tobolski
teamon
1
210
teamon
2
530
teamon
2
370
teamon
1
73
teamon
1
64
teamon
1
550
teamon
1
190
teamon
2
270
teamon
0
6.8k
Other Decks in Programming
See All in Programming
hanasuke
1
630
mihyaeru21
0
360
kimyan
3
220
kawaji_scratch
0
110
legalforce
PRO
0
640
makomakok
1
260
xrdnk
0
120
legalforce
PRO
1
720
selcukusta
2
110
afilina
PRO
0
150
meemeelab
0
290
layzee
1
220
Featured
See All Featured
smashingmag
230
18k
malarkey
392
61k
bkeepers
408
58k
62gerente
587
200k
eitanlees
112
10k
tenderlove
53
3.5k
jmmastey
10
610
mza
80
4.1k
davidbonilla
70
3.6k
3n
163
22k
marcelosomers
221
15k
bryan
31
3.4k
Transcript
Wrocław, 28.01.2013
ABOUT ME Tymon Tobolski B @iteamon H teamon.eu G teamon
None
None
HTML++
HTTP = EVENT WEBAPP = STATE
ONE-WAY DATA BINDING View Template Model merge
BACKBONE & FRIENDS View Template Model View Template Router Model
Model
BINDING MESS View Model Template
EVENT HANDLING class MyView extends Backbone.View events: "click #my-button": "handler"
handler: (e) => alert("Click!")
EVENT HANDLING $("#my-button").click (e) => alert("Click!")
ONE-WAY DATA BINDING View Template Model merge ?
TWO-WAY DATA BINDING View Template Model compile instant update
<!doctype html> <html ng-app> <head> <script src="angular.js"></script> </head> <body> <div>
<input type="text" ng-model="name"/> <span>Hello {{ name }}!</span> </div> </body> </html>
Controllers business logic Directives DOM manipulation Filters output manipulation Services
external dependencies ARCHITECTURE
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']) <div ng-controller="ItemsCtrl"> <li ng-repeat="item in items"> {{ item.name }} </li> <input type="text" ng-model="newName"/> <button ng-click="add()">+</button> </div> http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
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']) <div ng-controller="ItemsCtrl"> <li ng-repeat="item in items"> {{ item.name }} </li> <input type="text" ng-model="newName"/> <button ng-click="add()">+</button> </div> http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
None
DIRECTIVES user “events” ng-click ng-change ng-submit ng-mouse* state reflection ng-hide
ng-model ng-repeat ng-style
DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/>
DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/> custom UI directive
FILTERS $scope.value = 20000 <span>{{ value | currency }}</span>
FILTERS $scope.value = 20000 <span>{{ value | currency }}</span> filter
FILTERS currency date json lowercase uppercase number orderBy
SERVICES $http $resource REST $locale i18n $location $q Promise $scope
$routeParams
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:'/'})
$scope.items = Item.query() CALLBACK ARE BAD Promise (deffered) http://docs.angularjs.org/api/ng.$q
Questions? k
RESOURCES HOMEPAGE http://angularjs.org CONCEPTUAL MUST READ: http://docs.angularjs.org/guide/concepts TUTORIAL: http://docs.angularjs.org/tutorial/