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

Angular the Good Parts

krzychukula
December 01, 2015

Angular the Good Parts

My lightning talk is about the way I use Angular and I suggest it for everyone else as well as simpler to reason about and a good way to understand what you should learn when you're starting with Angular.

krzychukula

December 01, 2015
Tweet

More Decks by krzychukula

Other Decks in Programming

Transcript

  1. Angular the Good Parts
    (work in progress by @krzychukula)

    View Slide

  2. View Slide

  3. Thanks Jedi!
    (delivered by @krzychukula)

    View Slide

  4. View Slide

  5. Angular 1.*

    View Slide

  6. View Slide

  7. API explosion

    View Slide

  8. Scalable

    View Slide

  9. Angular 2

    View Slide

  10. 80/20

    View Slide

  11. Simple Rules

    View Slide

  12. 6 Simple Rules

    View Slide

  13. Let go of:
    ng-controller
    1

    View Slide

  14. Use:
    .directive

    View Slide

  15. $stateProvider
    .state('positions', {
    url: '/positions',
    template: ''
    })

    View Slide

  16. Let go of:
    $scope
    2

    View Slide

  17. Use:
    controllerAs: 'ctrl',

    View Slide

  18. Use:
    scope: {},
    bindToController: {
    count: '='
    },

    View Slide

  19. Let go of:
    link
    3

    View Slide

  20. Use:
    controller

    View Slide

  21. Let go of:
    templateUrl
    4

    View Slide

  22. Use:
    template

    View Slide

  23. angular.module('positions')
    .directive('positions', positions);

    View Slide

  24. function positions() {
    return {
    //next slide
    }
    }

    View Slide

  25. scope: {},
    bindToController: {
    data: “=”
    },
    controller: require('./positions-controller'),
    controllerAs: 'positions',
    template: require("./views/positions-page.jade")

    View Slide

  26. Let go of:
    $rootScope
    5

    View Slide

  27. Let go of:
    .provider
    6

    View Slide

  28. Work in progress

    View Slide

  29. Use:
    .factory

    View Slide

  30. Use:
    .service

    View Slide

  31. Feedback?

    View Slide

  32. Inspirations
    ● https://medium.com/@bluepnume/sane-scalable-angular-apps-are-tricky-but-not-impossible-
    lessons-learned-from-paypal-checkout-c5320558d4ef
    ● http://toddmotto.com/exploring-the-angular-1-5-component-method/
    ● http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html
    ● http://juristr.com/blog/2015/07/learning-ng-prepare-ng2/

    View Slide

  33. Thanks!
    (delivered by @krzychukula)

    View Slide