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
180
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
490
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
340
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
0
70
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
61
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
530
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
0
180
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
260
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
0
6.7k

Other Decks in Programming

See All in Programming
58e952ea302f1fa452f69c9d8204a8bc?s=48 toparvion
0
100
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
2
200
376e4eb9dc6c2e33d1330262edc4f109?s=48 janko_m
0
320
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
150
Cc696ce673253d3bd21b3aa9e7927f39?s=48 hitode909
0
960
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
1
230
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
200
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
1
190
40f4d1f2e77078955bd01e9fb4a503ba?s=48 m_seki
0
120
D79e3b0b78ca7027eb61d73028d45ad6?s=48 uchi_k
0
390
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
180
8665aad8f35b1710df79e9aef52d6daa?s=48 alexandresalome
0
180

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
145
12k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.2k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
84
3.8k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
334
15k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
165
6.8k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
499
36k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.3k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
260

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/