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
190
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
510
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
350
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
0
70
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
63
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
540
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
0
180
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
270
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
0
6.7k

Other Decks in Programming

See All in Programming
C0e29dade6ec33081689ac135a269b45?s=48 crgarridos
1
150
2f38ad91642226a08c0e1b926ba17f7c?s=48 furuhama
1
120
198d69383210fbec8c6bea4a35863c9d?s=48 tippy
3
610
Fc815be82d09a2e922d4000b65b9f83b?s=48 74th
1
430
Cc90ea0f1ad7a6770cab81c4ef151eee?s=48 yotahada3
0
1.1k
9178046d79f7b01ec590297c019fdd56?s=48 nagworld
1
230
Acdecb7b4baebb0d4c521626d21adc6a?s=48 motikoma
1
130
1dfa2bb34977b1db41d0d46d4505183f?s=48 osuke
2
280
62340514ee3033d54d79c9e7a3db68d5?s=48 kazutomo
0
830
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
200
D6fcc16462fbe93673342da3ff5d8121?s=48 xhochy
0
110
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
0
130

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
203
35k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
85
8.4k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
16
570
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
11
670
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
1.3k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.5k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
7
380
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
22
1.1k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1349
190k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
92
13k

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/