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


  1. 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
  2. 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
  3. 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
  4. 12.

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

    carPicker.html carPicker.js navigaLon showMakes showModels showBu`on
  5. 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
  6. 18.

    18 Who am I? Senior Sogware Engineer Hearst Autos h`p://

    h`ps:// @ratracegrad
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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