Tour of Heroes
This project was created to help represent a fundamental app written with Angular. The heroes and villains theme is used throughout the app.
by John Papa
Hosted in Azure
- Tour of Heroes with Angular
- Tour of Heroes with React
- Tour of Heroes with Svelte - coming soon!
- Tour of Heroes with Vue
Clone this repository
git clone https://github.com/johnpapa/heroes-angular.git cd heroes-angular
Install the npm packages
Run the app!
npm run quick
You can execute all of the UI tests by running the following steps
npm run cypress
What's in the App
Each of these apps contain:
Each of the apps written in the various frameworks/libraries has been designed to have similar features. While consistency is key, I want these apps to be comparable, yet done in an way authentic to each respective framework.
Each project represents heroes and villains. The user can list them and edit them.
Here is a list of those features:
- Start from the official quick-start and CLI
- Client side routing
- Three main routes Heroes, Villains, About
- Handles an erroneous route, leading to a PageNotFound component
- Active route is highlighted in the nav menu
- Routing should use html5 mode, not hash routes
- JSON server as a backend
- App served on one port which can access API on another port proxy or CORS)
- HTTP - Uses most common client http libraries for each framework
- Font Awesome
- Same exact css in every app
- Editing - Heroes and Villains will be editable (add, update, delete)
- State/Store - Uses a store for state management
- Web development server handles fallback routing
- Generic components
- Button Tool
- Header bar
- List header
- Nav bar
- Props in and emit events out
- Environment variable for the API location
Cypress.io makes it easy to run all three apps simultaneously in end to end tests, so you can watch the results while developing.
Why abstracted CSS?
Why JSON Server?
The app uses a JSON server for a backend by default. This allows you to run the code without needing any database engines or cloud accounts. Enjoy!
Problems or Suggestions
- VS Code
- Azure Free Trial
- VS Code Extension for Node on Azure
- VS Code Extension Marketplace
- VS Code - macOS keys
- VS Code - Windows keys