Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular.js

9fae8c5d475fe322a3a74e53d56ee2a0?s=47 Tymon Tobolski
January 28, 2013
Programming
7
1.1k

 Angular.js

9fae8c5d475fe322a3a74e53d56ee2a0?s=128

Tymon Tobolski

January 28, 2013
Tweet

More Decks by Tymon Tobolski

See All by Tymon Tobolski
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
210
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
530
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
370
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
73
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
64
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
550
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
190
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
270
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
0
6.8k

Other Decks in Programming

See All in Programming
73257f1de15fc7102c1f1a1eadd9dcb8?s=48 hanasuke
1
630
C0e58802a4228552548bb8ca596ca966?s=48 mihyaeru21
0
360
471605f6e94a32caa4b0101524f80429?s=48 kimyan
3
220
551a97bf567bea39c0550d3bbf2cc169?s=48 kawaji_scratch
0
110
Ad2155c75c67c0100dd008ad10858de5?s=48 legalforce
PRO
0
640
Ff1e356e879c9a03c73e7891cb9d63a6?s=48 makomakok
1
260
270b0c7883545117a9a618dc7ca7cc83?s=48 xrdnk
0
120
Ad2155c75c67c0100dd008ad10858de5?s=48 legalforce
PRO
1
720
06cd0c34899f8d878d44074d52ccd4e6?s=48 selcukusta
2
110
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
150
27ec11888b9deb5c26ab4c85e97ec000?s=48 meemeelab
0
290
4f349dbe1d48627445735f7e2c818c97?s=48 layzee
1
220

Featured

See All Featured
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
230
18k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
58k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
112
10k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
53
3.5k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
10
610
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4.1k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
70
3.6k
Ba530e786553390f3fb271848485681c?s=48 3n
163
22k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
31
3.4k

Transcript

  1. Wrocław, 28.01.2013

  2. ABOUT ME Tymon Tobolski B @iteamon H teamon.eu G teamon

  3. None
  4. None

  5. HTML++

  6. HTTP = EVENT WEBAPP = STATE

  7. ONE-WAY DATA BINDING View Template Model merge

  8. BACKBONE & FRIENDS View Template Model View Template Router Model

    Model

  9. BINDING MESS View Model Template

  10. EVENT HANDLING class MyView extends Backbone.View events: "click #my-button": "handler"

    handler: (e) => alert("Click!")

  11. EVENT HANDLING $("#my-button").click (e) => alert("Click!")

  12. ONE-WAY DATA BINDING View Template Model merge ?

  13. TWO-WAY DATA BINDING View Template Model compile instant update

  14. <!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>

  15. Controllers business logic Directives DOM manipulation Filters output manipulation Services

    external dependencies ARCHITECTURE

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

  17. 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
  18. None

  19. DIRECTIVES user “events” ng-click ng-change ng-submit ng-mouse* state reflection ng-hide

    ng-model ng-repeat ng-style

  20. DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/>

  21. DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/> custom UI directive

  22. FILTERS $scope.value = 20000 <span>{{ value | currency }}</span>

  23. FILTERS $scope.value = 20000 <span>{{ value | currency }}</span> filter

  24. FILTERS currency date json lowercase uppercase number orderBy

  25. SERVICES $http $resource REST $locale i18n $location $q Promise $scope

    $routeParams

  26. 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:'/'})

  27. $scope.items = Item.query() CALLBACK ARE BAD Promise (deffered) http://docs.angularjs.org/api/ng.$q

  28. Questions? k

  29. RESOURCES HOMEPAGE http://angularjs.org CONCEPTUAL MUST READ: http://docs.angularjs.org/guide/concepts TUTORIAL: http://docs.angularjs.org/tutorial/