Getting Started

Super simple Angular app with 1 module and 2 routes. Minor variation of the Tour of Heroes app JP wrote for the Angular docs.

I use this app in my Beginner UI Workshop to help people get more comfortable doing UI in Angular and to show off Kendo UI (the component library). See the workshop details below.

Install Instructions

This repo is commonly used by Alyssa Nicoll for her beginner UI workshops. It is an updated fork of John Papa's original tour of heroes, which can be found throughout the Angular docs and is a wonderful learning resource. This file should have all the instructions you need to get started. There will be prizes for best use of a Kendo UI Component and other categories, so make sure you have the repo installed and running!

• Host BIO: Alyssa is an Angular Developer Advocate for KUI and a Google Developer Expert for Angular. Her two degrees (Web Design & Development and Psychology) feed her speaking career. She has spoken at over 30 conferences Internationally. She streams weekly on the Angular Air podcast and Twitch CodeItLive channel. She enjoys gaming, scuba diving, and has a little one that fondly goes by "Mr. Milks".
• Host Headshot: https://cl.nicoll.co/eDujOn8D
• Host Twitter: @AlyssaNicoll

Get the Code

Clone down repo with HTTPS (easier for beginners)

git clone https://github.com/alyssamichelle/angular-tour-of-heroes.git

-or- you can clone down with SSH if you are set up for that:

git clone git@github.com:alyssamichelle/angular-tour-of-heroes.git

Move into that directory:

cd angular-tour-of-heroes 

Install the glorious dependencies

npm install

• Note, sometimes you might need to use --force when installing. If you run into dependency issues while install, try deleting your package-lock and node_modules before re-trying the install:

rm -rf node_modules package-lock.json

Serve up your app locally with the CLI:

ng serve

This runs a local development server at port http://localhost:4200/. The app will automatically reload if you change any of the source files. Go ahead and pull this up in your favorite browser!

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

This project was generated with Angular CLI version 1.2.0.

Alyssa's Beginner UI and Angular Workshop

A workshop 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! All you will need is a laptop and your favorite data set (mine, of course, will be ponies).

• 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.
• Take part in UI challenges throughout the Workshop and win prizes!