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.

Transcript

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/ ratracegrad@gmail.com @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/ ratracegrad@gmail.com @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