Adding Routes for Login and Home view components

- Project Repository: https://github.com/jsified-brains/momentz4ever-web-ng4/
- Branch specific for this task: https://github.com/jsified-brains/momentz4ever-web-ng4/tree/add-routing

In the previous few tasks, starting with the set up of the Angular 4 project from scratch for our Momentz-4-ever Web UI application, we have also got Webpack configured, our Karma-Jasmine Unit tests, created app-root and app-header components and also got Bootstrap set up for styling our application.

Moving ahead, our immediate next goals would be to create a Login View from where user can login to our application and a Home view where user will land after logging in.

Our long-term goal is to allow user to login with their facebook or google accounts using oAuth. But for now, we will keep it simple.
We’ll start with creating just static components for these Login and Home views, without wiring these up with any services or data at this point. And we’ll also setup ‘routing’ for our application with Login page as the default page (localhost:9000) and a ‘/home’ URL (localhost:9000/home) for the home page/view.

So, lets get started.

1. As the first step, we’ll update our existing app-header.component.ts to allow the app-header component to accept an additional optional @Input parameter variable isUserLoggedIn.

If its value is not provided from the parent component or its value is provided as false, then we will show a header that has no ‘Logout’ button.

But if the value of this @Input varaible isUserLoggedIn is provided by the parent embedding component as true, then we will show a header with few menu links and a Logout button.

For this, update the ./src/common/components/app-header/app-header.component.ts file as below:

☝️ line#9, we have a new @Input variable isUserLoggedIn of type boolean.

and update the component’s html template file ./src/common/components/app-header/app-header.component.html as below:

☝️ line#1 and 11, note the use of our new @Input variable isUserLoggedIn in the html template above with *ngIf.

The first set of <nav></nav> tags on line#1, have *ngIf=!isUserLoggedIn, that means this nav/header would be shown if the @Input variable isUserLoggedIn is either not provided/passed on from the parent component or its value has been specified as false.

The second set of <nav></nav> tags on line#11, have *ngIf=isUserLoggedIn, that means this nav/header would be shown if the @Input variable isUserLoggedIn is provided/passed on from the parent component with a truevalue. This header would show a few menu links and a logout button.

Login Component

2. Under the ./src/components folder, create a new folder login. Under ./src/components/login folder, create a file - app-login.component.ts with below code:

☝️ we created LoginComponent class. line#12–14 defines a function onLoginClick() that we would call on the click event of Login Button that we will create in the component’s html template.

At this point, to keep it simple, in the onLoginClick() function, we are just navigating the user to ‘/home’ URL that we would set to show the ‘home’ component when we would define the routes in a bit.
In one of the next tasks, we would integrate facebook oAuth in this function to show user the facebook login pop-up and after the user successfully logs in with his/her facebook credentials, we would navigate user to ‘/home’ view

3. In the same ./src/components/login folder, create the html template file of the login component - app-login.component.ts with below code:

☝️ line#1, we added app-header component tag with no isUserLoggedIn, attribute, which means the header would show the template that we have defined for the state when user is not logged in (header with no menu and logout buttons).

line#15–18, we added a button titled ‘facebook’ with the (click) event set to call onLoginClick() function of the component class.

Home component

4. Next, under the ./src/components folder, create a new folder home. Under ./src/components/home folder, create a file - app-home.component.ts with below code:

5. In the same ./src/components/home folder, create the html template file of the login component - app-home.component.ts with below code:

☝️ Again, we added app-header component tag at the top, but this time with [isUserLoggedIn]="true", which means the header would show the template that we have defined for the state when user is logged in (i.e. the header with menu links and logout buttons).

Configuring Routes

6. Next, lets setup routes for our application views.

For this, we’ll have to import RouterModule in app.module.ts (under ./src/components/app) and define an array of our routes object of type Route

import { Route, RouterModule } from '@angular/router';
...
...
const ROUTES: Route[] = [
   { path: '', component: LoginComponent},
   { path: 'home', component: HomeComponent}
]

☝️ Above, we have defined an array for our routes, named ROUTES and added Route objects for the two routes:
a. '' - a blank route i.e when no other route is found in the URL after the domain name ( i.e. http://localhost:9000 or http://mywebapp.com ), we are mapping it to LoginComponent.

b. 'home' - home route i.e. http://localhost:9000/home or http://mywebapp.com/home ), would map to HomeComponent.

And then inside the imports array in the @NgModule decorator’s config object add below:

@NgModule({
...
...
   imports: [
         ...
         ...
         RouterModule.forRoot(ROUTES)
   ],
...
...
})
....

7. While we are working on app.module.ts, lets also get the two components imported in app.module.ts and add those to the declarations array to let angular know our intention of using these components in our application.

With the above changes in app.module.ts, the file should now look something like below:

Router Outlet

Now that we got Routes configured, we will have to let angular know about the area on the page where it should display the contents of the component template mapped for a given route. This area is indicated by <router-outlet></router-outlet> pair of tags.

Update the app.component.html file as below:

We got everything set up for our routes now, lets see how the application is looking on the browser. Run npm run build on the command prompt/terminal if it hasn’t been running and go to http://localhost:9000 in the browser. We should see our login view as below:

Click on the login button, this should call the onLoginClick function of the login component class, where for now we are simply navigating the user to ‘home’ route that maps to HomeComponent, thus showing the below view on the page:

Cool, so we got the Routing configured for our Angular 4 app. 👏

Next, we’ll set up Facebook oAuth to allow our users to login with their facebook accounts.