Angular Folders and Routing

When we first create a project we will see a folder structure similar to the image shown above.

As a new Angular developer, the most popular folder is 'src', this is where the components are created. This folder is also referred to as the 'root' folder of your application.

What's a component? It's simply a collection of files that extends a web page to include four things: HTML, the Styling, the Typescript (code behind) and the Test.

To create a new Component the command is simply 'ng g c name' where name is any name desired.

Issue this command in the src/app folder:

ng g c Start

Just make sure you are in the 'src' folder when that command is issued.

Want to see your page? The easiest way is to create a route for it.

Routes
Routes are entry points to specific pages in your web site.

It the instructions to create the new project were followed on the previous series post, you should see a file named app-routing.module.ts

Open that file. There are two things to know about creating routes, 1) We have to import the component we want to have routed, and 2) We have to configure a path.

Assume the new component we just created is named StartComponent.

Type this in:

import {} from './start/start.component';

As you type in the 'from' part above, after typing in './', you should see suggestions for the path desired. Note that by typing in '../' you control how far back to look in your solution.

from './start/start.component';

After the path is found then go back to the brackets and fill in the name of 'start' and a suggestion should pop up giving you this.

import { StartComponent } from './start/start.component';

Congratulations you now have a reference to that 'component'.

Route
In the app-routing.module.ts there is a section named 'routes' it should have this in it, to see your new 'StartComponent'

const routes: Routes = [
  { path: 'start', component: StartComponent },]

Explanation:
const means it is a constant variable. 'routes' is the name of the variable. : Routes[...] means that the value of 'routes' is an array named Routes, which has things in it, each thing being separated by a comma.

The we see an open bracket, { this is a symbol to JavaScript saying we want to define an object. So in JavaScript an empty object would be this: {}

JavaScript likes the concept of name/value pairs. In an object we have this {name:value} where name is anything we want and value is what is returned when we reference that name.

let t = {time:'10am'};
let currentTime = t.time;
is a statement where currentTime will have the value of '10am'.

This applies to our routing entry as follows:

const routes: Routes = [
  { path: 'start', component: StartComponent },]

Anytime the user goes to your site and types in http://mysite/start

The startComponent page will be displayed due to the route entry.

Image: Route 66 as it is today somewhere.

JWP2021