An Angular starter project with basic routing, System.js as the loader and a local Express.js web server.
Starting an Angular project from scratch can be tedious, but the Github repo links at the end of this post provide a starting point that you can easily clone, edit and shape as needed, and should save you some work. An important note: this project is built using System.js, and in this approach, the Typescript code is compiled on the fly. This starter project is not recommended for production application, but just to provide a quick and easy way to spin-up an Angular application for local testing. You can also accomplish this using the Angular CLI, but I wanted to offer another option.
Note, also, that when you clone the code from GitHub, there is a local web server provided. This server allows you to make true HTTP requests from the local web page (i.e. you don’t want to load this code into your browser using the file:/// protocol; that simply won’t work). And just be aware that the Angular CLI is usually an even quicker and easier way to spin-up an Angular application for local testing.
Example # 1
In Example # 1, we have app.module.ts. Note the RouteXComponent references (i.e. “Route1Component“, “Route2Component” and “Route3Component“). These are the components that make up the application and that need to be defined as routes. There’s not too much more to discuss here; this code exists simply to boot up the application.
Example # 2
In Example # 2, we have routes.ts, which is where the routing is configured. Right now, the routes are route1, route2, and route3, and they will instantiate the “Route1Component“, “Route2Component” and “Route3Component” components accordingly. You can change them as needed for your project, you’ll just need to rename each component, and its associated files.
Now take a close look at line # 8. This line tells the router what to do when a specific route is not selected (i.e. when the user requests the root of the application: “/”). So, here we are saying to the router: when the user browses to the root of the application, take them to route1.
Example # 3 – A
Example # 3 – B
In Example # 3, we have our Route1Component component. The other components are identical, and they’re named accordingly. To use this for your project, just rename the route1 references to whatever you want to call your component. And this change would need to be made in app.module.ts, routes.ts and then each route. These routes do not do too much, as you can see in Example # 3 – A and Example # 3 – B. They’re just meant to provide an empty shell that you can use to quickly spin-up a local test Angular application. The easiest way to do this is to clone the code in github, run npm install, and then npm start.
Video Example Code
If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/kcv-angular-routing-basic
