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

Want more?

9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
160
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
2
470
9fae8c5d475fe322a3a74e53d56ee2a0?s=48 teamon
1
310
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
2
160
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
81
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
72
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
150
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
4
160
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
440
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
120
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

    Wrocław, 28.01.2013

  2. 2.

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

  3. 3.
    None
  4. 4.
    None
  5. 5.

    HTML++

  6. 6.

    HTTP = EVENT WEBAPP = STATE

  7. 7.

    ONE-WAY DATA BINDING View Template Model merge

  8. 8.

    BACKBONE & FRIENDS View Template Model View Template Router Model

    Model
  9. 9.

    BINDING MESS View Model Template

  10. 10.

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

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

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

  12. 12.

    ONE-WAY DATA BINDING View Template Model merge ?

  13. 13.

    TWO-WAY DATA BINDING View Template Model compile instant update

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

    Controllers business logic Directives DOM manipulation Filters output manipulation Services

    external dependencies ARCHITECTURE
  16. 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. 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. 18.
    None
  19. 19.

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

    ng-model ng-repeat ng-style
  20. 20.

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

  21. 21.

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

  22. 22.

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

  23. 23.

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

  24. 24.

    FILTERS currency date json lowercase uppercase number orderBy

  25. 25.

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

    $routeParams
  26. 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. 27.

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

  28. 28.

    Questions? k

  29. 29.

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