Slide 1

Slide 1 text

Wrocław, 28.01.2013

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

HTML++

Slide 6

Slide 6 text

HTTP = EVENT WEBAPP = STATE

Slide 7

Slide 7 text

ONE-WAY DATA BINDING View Template Model merge

Slide 8

Slide 8 text

BACKBONE & FRIENDS View Template Model View Template Router Model Model

Slide 9

Slide 9 text

BINDING MESS View Model Template

Slide 10

Slide 10 text

EVENT HANDLING class MyView extends Backbone.View events: "click #my-button": "handler" handler: (e) => alert("Click!")

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ONE-WAY DATA BINDING View Template Model merge ?

Slide 13

Slide 13 text

TWO-WAY DATA BINDING View Template Model compile instant update

Slide 14

Slide 14 text

Hello {{ name }}!

Slide 15

Slide 15 text

Controllers business logic Directives DOM manipulation Filters output manipulation Services external dependencies ARCHITECTURE

Slide 16

Slide 16 text

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'])
  • {{ item.name }}
  • +
    http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT

    Slide 17

    Slide 17 text

    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'])
  • {{ item.name }}
  • +
    http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT

    Slide 18

    Slide 18 text

    No content

    Slide 19

    Slide 19 text

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

    Slide 20

    Slide 20 text

    DIRECTIVES angular-ui.github.com

    Slide 21

    Slide 21 text

    DIRECTIVES angular-ui.github.com custom UI directive

    Slide 22

    Slide 22 text

    FILTERS $scope.value = 20000 {{ value | currency }}

    Slide 23

    Slide 23 text

    FILTERS $scope.value = 20000 {{ value | currency }} filter

    Slide 24

    Slide 24 text

    FILTERS currency date json lowercase uppercase number orderBy

    Slide 25

    Slide 25 text

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

    Slide 26

    Slide 26 text

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

    Slide 27

    Slide 27 text

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

    Slide 28

    Slide 28 text

    Questions? k

    Slide 29

    Slide 29 text

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