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

More Decks by Jennifer Bland

Other Decks in Programming


  1. Using Components In Angular 1.5 Jennifer Bland

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

  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
  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
  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
  6. Before and After

  7. Before and After

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

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

  10. 10 What We Will Create

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

  12. 12 Directory Structure index.html app.js stylesheets style.css vendor components carPicker

    carPicker.html carPicker.js navigaLon showMakes showModels showBu`on
  13. 13 Live Demo

  14. 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
  15. 15 h`ps://goo.gl/mdlkkP h`p://www.jenniferbland.com h`ps://github.com/ratracegrad/ [email protected] @ratracegrad

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

  17. by Jennifer Bland Using Components in Angular 1.5

  18. 18 Who am I? Senior Sogware Engineer Hearst Autos h`p://www.jenniferbland.com

    h`ps://github.com/ratracegrad/ [email protected] @ratracegrad
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 24 Tweet •Please tweet about presentaLon •Use #ngconf and #wwcatl