Angular.js

 Angular.js

9fae8c5d475fe322a3a74e53d56ee2a0?s=128

Tymon Tobolski

January 28, 2013
Tweet

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/