For UI and Angular beginners alike. Let's pull down the Tour of Heroes app (found throughout the Angular docs) and give it a UI upgrade!
- Dive into the Tour of Heroes demo application like never before!
- Learn about integrating Sass into your Angular Project.
- Learn how to include a Component Library into your Project. (We will be using Kendo UI but the principles to implement a UI Library are pretty universal.)
- Play around with customizing styles and writing custom CSS from scratch.
- Go over UI/UX principles and implement them on the fly.
- Talk about some accessibility tips along the way.
Learning often sticks best when combined with application. Why not take part in a UI Challenge during my talk, to try out some of the new techniques you’ll be learning throughout?!
I have 3 Amazon gift cards and a pair of Bose Headphones up for grabs, all you need to do is clone this repo and upgrade the UI! Bonus points for including Kendo UI Components.
Tweet a screenshot of your upgraded UI and/or code with the tag #heykendoui to enter the competition! I'll reply to the winning tweets for contact info!
- talk about GH vs StackBlitz
- Clone down the GitHub Repo
- → https://github.com/alyssamichelle/angular-tour-of-heroes
- -or- open in StackBlitz and Fork!
- → https://stackblitz.com/github/alyssamichelle/angular-tour-of-heroes
- Clone down the TOH
- Talk about Angular Basics: give a tour of the routes & components
-
application structure
-
The CLI
-
Routes
-
Modules (covered more later on kendo install)
-
Components
-
Templates
-
Directives: used to modify the behavior, appearance, or structure (ngIf) of the DOM
-
Data binding
-
Sass variables & CSS Custom Properties
- syntax differences
- view encapsulation with :root for css vars
- If you need to update a variable after view has been rendered, use CSS variables (Sass vars won’t exist anymore)
ng new my-scss-app --style=scss
ng config schematics.@schematics/angular:component.style scss
ng add @progress/kendo-angular-layout
Resources to share out: