Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Angular.js in Existing Projects

Using Angular.js in Existing Projects

angularjs.tw#3

Chia-liang Kao

July 05, 2013
Tweet

More Decks by Chia-liang Kao

Other Decks in Programming

Transcript

  1. Using Angular.js in Existing
    Projects
    A
    n
    d a g
    l
    i
    m
    p
    s
    e o
    f t
    h
    e c
    o
    m
    p
    o
    n
    e
    n
    t
    s
    a
    n
    g
    u
    l
    a
    r
    j
    s
    .
    t
    w
    #
    3 @
    c
    l
    k
    a
    o

    View full-size slide

  2. Why?
    Animation is cool! as we learned last time
    ++
    lots of angularjs modules are now available, and you don’t need to
    be in a pure ng-world to use them.

    View full-size slide

  3. A little recap
    No controller, if the interaction is trivial: (Using ui-bootstrap)
    .
    b
    t
    n
    -
    g
    r
    o
    u
    p
    a
    .
    b
    t
    n
    (
    n
    g
    -
    m
    o
    d
    e
    l
    =
    "
    t
    y
    p
    e
    "
    ,
    b
    t
    n
    -
    r
    a
    d
    i
    o
    =
    "
    '
    p
    r
    i
    c
    e
    '
    "
    ) P
    r
    i
    c
    e
    a
    .
    b
    t
    n
    (
    n
    g
    -
    m
    o
    d
    e
    l
    =
    "
    t
    y
    p
    e
    "
    ,
    b
    t
    n
    -
    r
    a
    d
    i
    o
    =
    "
    '
    u
    n
    i
    t
    p
    r
    i
    c
    e
    '
    "
    ) U
    n
    i
    t
    .
    l
    e
    a
    f
    l
    e
    t
    (
    c
    l
    a
    s
    s
    =
    "
    a
    g
    g
    r
    e
    g
    a
    t
    e
    -
    {
    { t
    y
    p
    e }
    }
    "
    ,
    r
    e
    s
    i
    z
    e
    )
    Implicit $
    s
    c
    o
    p
    e.

    View full-size slide

  4. In html
    <
    d
    i
    v c
    l
    a
    s
    s
    =
    "
    b
    t
    n
    -
    g
    r
    o
    u
    p
    "
    >
    <
    a n
    g
    -
    m
    o
    d
    e
    l
    =
    "
    t
    y
    p
    e
    " b
    t
    n
    -
    r
    a
    d
    i
    o
    =
    "
    '
    p
    r
    i
    c
    e
    '
    " c
    l
    a
    s
    s
    =
    "
    b
    t
    n
    "
    >
    P
    r
    i
    c
    e
    <
    /
    a
    >
    <
    a n
    g
    -
    m
    o
    d
    e
    l
    =
    "
    t
    y
    p
    e
    " b
    t
    n
    -
    r
    a
    d
    i
    o
    =
    "
    '
    u
    n
    i
    t
    p
    r
    i
    c
    e
    '
    " c
    l
    a
    s
    s
    =
    "
    b
    t
    n
    "
    >
    U
    n
    i
    t
    <
    /
    a
    >
    <
    /
    d
    i
    v
    >
    <
    d
    i
    v r
    e
    s
    i
    z
    e
    =
    "
    r
    e
    s
    i
    z
    e
    " c
    l
    a
    s
    s
    =
    "
    l
    e
    a
    f
    l
    e
    t a
    g
    g
    r
    e
    g
    a
    t
    e
    -
    {

    { t
    y
    p
    e }
    }
    "
    >
    <
    /
    d
    i
    v
    >
    You can now use .aggregate-price and .aggregate-unit selectors to
    control the display inside leaflet

    View full-size slide

  5. sass
    .
    a
    g
    g
    r
    e
    g
    a
    t
    e
    -
    m
    a
    r
    k
    e
    r s
    p
    a
    n
    d
    i
    s
    p
    l
    a
    y
    : n
    o
    n
    e
    .
    l
    e
    a
    f
    l
    e
    t
    &
    .
    a
    g
    g
    r
    e
    g
    a
    t
    e
    -
    p
    r
    i
    c
    e
    .
    a
    g
    g
    r
    e
    g
    a
    t
    e
    -
    m
    a
    r
    k
    e
    r s
    p
    a
    n
    .
    p
    r
    i
    c
    e
    d
    i
    s
    p
    l
    a
    y
    : b
    l
    o
    c
    k
    &
    .
    a
    g
    g
    r
    e
    g
    a
    t
    e
    -
    u
    n
    i
    t
    p
    r
    i
    c
    e
    .
    a
    g
    g
    r
    e
    g
    a
    t
    e
    -
    m
    a
    r
    k
    e
    r s
    p
    a
    n
    .
    u
    n
    i
    t
    p
    r
    i
    c
    e
    d
    i
    s
    p
    l
    a
    y
    : b
    l
    o
    c
    k

    View full-size slide

  6. Demo
    realprice.g0v.tw

    View full-size slide

  7. bootstrap
    Basically what <
    h
    t
    m
    l n
    g
    -
    a
    p
    p
    > does for us.
    Similar to:
    a
    n
    g
    u
    l
    a
    r
    .
    b
    o
    o
    t
    s
    t
    r
    a
    p
    (
    $
    e
    l
    e
    m
    e
    n
    t
    )

    View full-size slide

  8. bootstrapping in existing project
    Let’s walk through this by modifying a real project.
    Subway - an IRC web UI built with Backbone
    W
    A
    R
    N
    I
    N
    G just an example, not for practical reason
    nor complete.
    github.com/clkao/subway angulardemo branch

    View full-size slide

  9. Let’s change the user list

    View full-size slide

  10. fragments
    Subway does some client side templating in ChatView:
    t
    h
    i
    s
    .
    s
    e
    t
    e
    l
    e
    m
    e
    n
    t
    (
    i
    c
    h
    .
    t
    e
    m
    p
    l
    a
    t
    e
    s
    .
    c
    h
    a
    t
    )
    ;
    a
    n
    g
    u
    l
    a
    r
    .
    b
    o
    o
    t
    s
    t
    r
    a
    p
    (
    t
    h
    i
    s
    .
    $
    e
    l
    , [
    ]
    )
    ;
    So let’s just bootstrap after the template is rendered
    But if you do something more complicated, you need $compile

    View full-size slide

  11. $compile
    Every time you do $
    e
    l
    e
    m
    e
    n
    t
    .
    h
    t
    m
    l
    (
    '
    <
    d
    i
    v
    >
    .
    .
    .
    <
    /
    d
    i
    v
    >
    '
    ) a
    kitten dies. Save them with:
    $
    i
    n
    j
    e
    c
    t
    o
    r = a
    n
    g
    u
    l
    a
    r
    .
    e
    l
    e
    m
    e
    n
    t
    (
    r
    o
    o
    t
    )
    .
    d
    a
    t
    a
    (
    '
    $
    i
    n
    j
    e
    c
    t
    o
    r
    '
    )
    ;
    $
    s
    c
    o
    p
    e = a
    n
    g
    u
    l
    a
    r
    .
    e
    l
    e
    m
    e
    n
    t
    (
    $
    e
    l
    e
    m
    e
    n
    t
    )
    .
    s
    c
    o
    p
    e
    (
    )
    ;
    $
    c
    o
    m
    p
    i
    l
    e = $
    i
    n
    j
    e
    c
    t
    o
    r
    .
    i
    n
    v
    o
    k
    e
    (
    f
    u
    n
    c
    t
    i
    o
    n
    (
    $
    c
    o
    m
    p
    i
    l
    e
    ) { r
    e
    t
    u
    r
    n $
    c
    o
    m
    p
    i
    l
    e }
    $
    c
    o
    m
    p
    i
    l
    e
    (
    e
    l
    e
    m
    e
    n
    t
    )
    (
    $
    s
    c
    o
    p
    e
    )
    ;

    View full-size slide

  12. $digest
    when data (dom values or refrences) changed in non-angular
    context, manually $digest the $scope.
    $
    s
    c
    o
    p
    e = a
    n
    g
    u
    l
    a
    r
    .
    e
    l
    e
    m
    e
    n
    t
    (
    t
    h
    i
    s
    .
    _
    e
    l
    e
    m
    e
    n
    t
    )
    .
    s
    c
    o
    p
    e
    (
    )
    ;
    $
    s
    c
    o
    p
    e
    .
    u
    s
    e
    r
    s
    .
    p
    u
    s
    h
    (
    U
    s
    e
    r
    .
    a
    t
    t
    r
    i
    b
    u
    t
    e
    s
    )
    ;
    $
    s
    c
    o
    p
    e
    .
    $
    d
    i
    g
    e
    s
    t
    (
    )
    ;

    View full-size slide

  13. Controller
    • = modular $scope helper
    • enabe with ng-controller tag attributes
    • or ui-router state rule

    View full-size slide

  14. Module
    Essentially a collection of things, can load other dependencies.
    a
    n
    g
    u
    l
    a
    r
    .
    m
    o
    d
    u
    l
    e
    (
    '
    s
    u
    b
    w
    a
    y
    '
    , [
    '
    u
    i
    -
    b
    o
    o
    t
    s
    t
    r
    a
    p
    '
    ]
    )
    .
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r
    (
    '
    U
    s
    e
    r
    L
    i
    s
    t
    '
    , f
    u
    n
    c
    t
    i
    o
    n
    (
    $
    s
    c
    o
    p
    e
    ) {
    $
    s
    c
    o
    p
    e
    .
    u
    s
    e
    r
    s = [
    ]
    }
    )
    ;
    a
    n
    g
    u
    l
    a
    r
    .
    b
    o
    o
    t
    s
    t
    r
    a
    p
    (
    $
    e
    l
    e
    m
    e
    n
    t
    , [
    '
    s
    u
    b
    w
    a
    y
    '
    ]
    )

    View full-size slide

  15. $scope scope
    Many directives create new scopes. Some creates isolated scopes.
    .
    u
    s
    e
    r
    l
    i
    s
    t
    _
    u
    s
    e
    r
    (
    n
    g
    -
    r
    e
    p
    e
    a
    t
    =
    "
    u
    s
    e
    r i
    n u
    s
    e
    r
    s
    "
    ) #
    # n
    e
    w s
    c
    o
    p
    e w
    i
    t
    h i
    t
    e
    r
    a
    t
    o
    r
    d
    i
    v
    (
    c
    l
    a
    s
    s
    =
    "
    u
    s
    e
    r
    l
    i
    s
    t
    _
    u
    s
    e
    r
    _
    a
    c
    t
    i
    v
    i
    t
    y
    "
    )
    i
    m
    g
    (
    n
    g
    -
    s
    r
    c
    =
    "
    /
    a
    s
    s
    e
    t
    s
    /
    i
    m
    a
    g
    e
    s
    /
    .
    p
    n
    g
    "
    )
    “prototopical copy” - If you don’t know what it means, use an object
    if you want the child scopes to be able to update scope variables.

    View full-size slide

  16. Service
    • communication between Controllers.
    • persistent across controller

    View full-size slide

  17. Service - auth example
    .
    c
    o
    n
    t
    r
    o
    l
    l
    e
    r F
    o
    o
    : (
    $
    s
    c
    o
    p
    e
    , m
    y
    A
    u
    t
    h
    S
    e
    r
    v
    i
    c
    e
    ) -
    >
    $
    s
    c
    o
    p
    e
    .
    $
    o
    n '
    e
    v
    e
    n
    t
    :
    a
    u
    t
    h
    -
    l
    o
    g
    g
    e
    d
    i
    n
    ' -
    > # d
    o
    s
    o
    m
    e
    t
    h
    i
    n
    g
    .
    f
    a
    c
    t
    o
    r
    y m
    y
    A
    u
    t
    h
    S
    e
    r
    v
    i
    c
    e
    : (
    $
    h
    t
    t
    p
    , $
    r
    o
    o
    t
    S
    c
    o
    p
    e
    ) -
    >
    l
    o
    g
    i
    n
    : -
    >
    # i
    f l
    o
    g
    g
    e
    d
    -
    i
    n
    :
    $
    r
    o
    o
    t
    S
    c
    o
    p
    e
    .
    $
    b
    r
    o
    a
    d
    c
    a
    s
    t '
    e
    v
    e
    n
    t
    :
    a
    u
    t
    h
    -
    l
    o
    g
    g
    e
    d
    i
    n
    '
    , {
    u
    s
    e
    r
    }

    View full-size slide

  18. Directives
    Remember r
    e
    s
    i
    z
    e?
    .
    l
    e
    a
    f
    l
    e
    t
    (
    r
    e
    s
    i
    z
    e
    )
    l
    e
    a
    f
    l
    e
    t
    (
    n
    g
    -
    s
    t
    y
    l
    e
    =
    '
    {
    w
    i
    d
    t
    h
    : $
    p
    a
    r
    e
    n
    t
    .
    w
    i
    d
    t
    h
    ,
    h
    e
    i
    g
    h
    t
    : $
    p
    a
    r
    e
    n
    t
    .
    c
    o
    n
    t
    e
    n
    t
    H
    e
    i
    g
    h
    t
    }
    '
    )

    View full-size slide

  19. Resize
    .
    d
    i
    r
    e
    c
    t
    i
    v
    e '
    r
    e
    s
    i
    z
    e
    ' (
    $
    w
    i
    n
    d
    o
    w
    ) -
    >
    (
    $
    s
    c
    o
    p
    e
    , e
    l
    e
    m
    e
    n
    t
    , a
    t
    t
    r
    s
    ) -
    >
    r
    e
    f
    r
    e
    s
    h
    -
    s
    i
    z
    e = -
    >
    $
    s
    c
    o
    p
    e
    .
    w
    i
    d
    t
    h = $
    w
    i
    n
    d
    o
    w
    .
    i
    n
    n
    e
    r
    W
    i
    d
    t
    h
    $
    s
    c
    o
    p
    e
    .
    c
    o
    n
    t
    e
    n
    t
    -
    h
    e
    i
    g
    h
    t = $
    s
    c
    o
    p
    e
    .
    h
    e
    i
    g
    h
    t = $
    w
    i
    n
    d
    o
    w
    .
    i
    n
    n
    e
    r
    H
    e
    i
    g
    h
    t
    $
    s
    c
    o
    p
    e
    .
    c
    o
    n
    t
    e
    n
    t
    -
    h
    e
    i
    g
    h
    t -
    = $
    (
    e
    l
    e
    m
    e
    n
    t
    )
    .
    o
    f
    f
    s
    e
    t
    (
    )
    .
    t
    o
    p
    a
    n
    g
    u
    l
    a
    r
    .
    e
    l
    e
    m
    e
    n
    t
    (
    $
    w
    i
    n
    d
    o
    w
    )
    .
    b
    i
    n
    d '
    r
    e
    s
    i
    z
    e
    ' -
    >
    $
    s
    c
    o
    p
    e
    .
    $
    a
    p
    p
    l
    y r
    e
    f
    r
    e
    s
    h
    -
    s
    i
    z
    e
    r
    e
    f
    r
    e
    s
    h
    -
    s
    i
    z
    e
    !

    View full-size slide

  20. Directives
    All dom interaction should be defined as directives.
    The Hitchhiker’s Guide to the Directive

    View full-size slide

  21. Route v.s. State
    Builtin router = route -> view -> controller
    Use ui-router instead: route -> state <- controller

    View full-size slide