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

Using Components in Angular 1.5

Using Components in Angular 1.5

Components allow you to create custom HTML features. Components are a new feature in Angular 1.5 and learning how to utilize them will help you to transition to Angular 2. Learn how and why you should use components and then watch as I build several simple components.

Jennifer Bland

April 05, 2017
Tweet

More Decks by Jennifer Bland

Other Decks in Programming

Transcript

  1. Using Components In Angular 1.5
    Jennifer Bland

    View full-size slide

  2. 2
    Get the Code
    github.com/ratracegrad/ngconf-components-angular15

    View full-size slide

  3. 3
    •Angular released Sep 14, 2016
    •React is rapidly growing in popularity
    •Both are component-based architectures
    •AngularJS is not
    •AngularJS 1.5 added support for components
    Background

    View full-size slide

  4. 4
    Components in AngularJS
    •Syntax sugar for .direcLve()
    •Anything do with .component can do with .direcLve()
    •Easier to create
    •Default to best pracLces
    •Easier to upgrade to Angular

    View full-size slide

  5. 5
    Components in AngularJS 1.5
    •Have isolate scope by default
    •Use controllers instead of link funcLons
    •AutomaLcally uses controllerAs syntax
    •bindToController opLon is on by default

    View full-size slide

  6. Before and After

    View full-size slide

  7. Before and After

    View full-size slide

  8. 8
    New Features
    •One-way binding
    •Lifecycle hooks
    •Stateless components

    View full-size slide

  9. 9
    LifeCycle Events
    •$onInit()
    •$postLink()
    •$onChanges()
    •$onDestroy()

    View full-size slide

  10. 10
    What We Will Create

    View full-size slide

  11. 11
    Component Structure
    app
    navigaLon carPicker
    showModels showBu`on
    showMakes
    carInfo

    View full-size slide

  12. 12
    Directory Structure
    index.html
    app.js
    stylesheets
    style.css
    vendor
    components
    carPicker
    carPicker.html
    carPicker.js
    navigaLon
    showMakes
    showModels
    showBu`on

    View full-size slide

  13. 14
    We Are Hiring!
    •More than 12 MM unique visitors per month
    •More than 100MM pages viewed per month
    •More than 2MM followers on Facebook
    Tech Stack is Node, Express, Angular 2, Docker

    View full-size slide

  14. 15
    h`ps://goo.gl/mdlkkP
    h`p://www.jenniferbland.com
    h`ps://github.com/ratracegrad/
    [email protected]
    @ratracegrad

    View full-size slide

  15. 16
    h`ps://goo.gl/mdlkkP

    View full-size slide

  16. by Jennifer Bland
    Using Components
    in Angular 1.5

    View full-size slide

  17. 18
    Who am I?
    Senior Sogware Engineer
    Hearst Autos
    h`p://www.jenniferbland.com
    h`ps://github.com/ratracegrad/
    [email protected]
    @ratracegrad

    View full-size slide

  18. 19
    Step 01
    •git checkout step01
    •add ng-app to index.html
    •add links to our stylesheet and bootstrap
    •add scripts for angular and our app
    •add “Hello World” to body

    View full-size slide

  19. 20
    Step 02
    •git checkout step02
    •create components folder
    •create navigaLon folder inside components
    •create files navigaLon.js and navigaLon.html
    •create navigaLon component
    •insert navigaLon component into applicaLon

    View full-size slide

  20. 21
    Step 03
    •git checkout step03
    •create carPicker folder inside components
    •create files carPicker.js and carPicker.html
    •add variables selectedMake and
    selectedModel to carPicker controller
    •add styling for carPicker.html
    •add carPicker script to index.html
    •add carPicker component to index.html

    View full-size slide

  21. 22
    Step 04
    •git checkout step04
    •create showMakes folder inside components
    •create files showMakes.js and showMakes.html
    •create select for makes using ui-select
    •add ui-select to app dependencies
    •add ui-select script to index.html
    •add showMakes script to index.html
    •add showMakes component to carPicker.html

    View full-size slide

  22. 23
    Step 05
    •git checkout step05
    •create showModels folder inside components
    •create files showModels.js and showModels.html
    •create select for models using ui-select
    •add showModels script to index.html
    •add showModels component to carPicker.html

    View full-size slide

  23. 24
    Tweet
    •Please tweet about presentaLon
    •Use #ngconf and #wwcatl

    View full-size slide