Loading Events

« All Events

  • This event has passed.

zero 2 HERO Angular challenge – virtual

17 August 2018 @ 7:00 pm - 9:00 pm

Hi everyone,

As our community is over 200 members but we never able to get all participants out, I will be releasing a video everyday on how to get started with Angular. Most videos are under 8 minutes as the idea is to teach one small aspect of Angular. The first video is up on the Facebook Group so please join now and get started.

Facebook group:
https://www.facebook.com/groups/uxbridge.developers/

Here is what the video goes through.

In this session we will be adding routing to our SPA application

First, we need to create the module, go to terminal and type:

ng generate module app-routing –flat –module=app

–flat puts the file in src/app instead of its own folder.
–module=app tells the CLI to register it in the imports array of the AppModule.

We need to make some tweaks

Change:

imports: [
CommonModule
],
declarations: []

To:
Imports: [ RouterModule.forRoot(routes) ],

Now add:

exports: [ RouterModule ]

Before the @NgModule we need to add a new routes constant

const routes: Routes = [
{path: ”, component: HomeComponent},
{path: ‘learn-maths’, component: MathsComponent}

];

For every component we want to add to our routing, we do need to add an import at the top so our application knows where the component is stored.

import { HomeComponent } from ‘./home/home.component’;
import { MathsComponent } from ‘./maths/maths.component’;

Now the routing is set up, lets add the routing to the menu so the user can switch between the views.

To do so, remove the href and add routerLink=”/” for the home page and routerLink=”learn-match” for the maths page.

There we have it, our SPA now has routing to seamlessly switch between content 🙂

Venue

Uxbridge Developers Facebook Group
999 High Street
Uxbridge, GB
+ Google Map