We have added all the necessary modules into our application. We should also take a final look at our main app component, found under the following path—contact-manager/public/src/app.component.ts
:
import { Component } from 'angular2/core'; import { RouteConfig, RouterOutlet } from 'angular2/router'; import { Router } from 'angular2/router'; import { AuthHttp } from './auth/auth-http'; import { Signin } from './auth/signin'; import { Register } from './auth/register'; import { ContactComponent } from './contact/components/contact.component'; @RouteConfig([ { path: '/signin', as: 'Signin', component: Signin }, { path: '/register', as: 'Register', component: Register }, { path: '/contacts/...', as: 'Contacts', component: ContactComponent, useAsDefault: true } ]) @Component({ selector: 'cm-app', directives: [ Signin, Register, ContactComponent, RouterOutlet ], template: ` <div class="app-wrapper col card whiteframe-z2"> <div class="row"> <h3>Contact manager</h3> </div> <router-outlet></router-outlet> </div> ` }) export class AppComponent { private _authHttp: AuthHttp; private _router: Router; constructor(authHttp: AuthHttp, router: Router) { this._authHttp = authHttp; this._router = router; this._authHttp.unauthorized.subscribe((res) => { if (res) { this._router.navigate(['./Signin']); } }); } }
We mount all the components to their specific routes. Also, when we mount the Contact
component, we'll bring in all the configured routes from the component.
In order to be notified when a request is unauthorized, we subscribe to the AuthHttp
service's unauthorized
data stream. If a request needs authentication, we redirect the user to the sign-in page.
The boot file for our application will look something like this:
import { bootstrap } from 'angular2/platform/browser'; import { provide } from 'angular2/core'; import { HTTP_PROVIDERS } from 'angular2/http'; import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from 'angular2/router'; import { AuthHttp } from './auth/auth-http'; import { AuthService } from './auth/auth.service'; import { ContactService } from './contact/contact.service'; import { AppComponent } from './app.component'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/share'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; bootstrap(AppComponent, [ ROUTER_PROVIDERS, HTTP_PROVIDERS, AuthService, AuthHttp, ContactService, provide(LocationStrategy, {useClass: HashLocationStrategy}) ]);
We import and define the necessary providers and also add the operators we used from RxJs. This is because Angular, by default, uses only a stripped-down version of the Observable module.
Through the contact module we used a custom class named Contact
, which plays the role of a Contact
model. This will be instantiated any time we want to make sure we are working with a contact entity. Besides, the nice thing about TypeScript is that it enables us to use structured code.
Classes come in handy when we want to have initial values, for example, in our components we used a contact.image
property to display a contact's profile image. This was not implemented in the backend, so we use a mock URL for an image. Let's see the Contact
class, public/src/contact/contact.ts
:
export class Contact { _id: string; email: string; name: string; city: string; phoneNumber: string; company: string; image: string; createdAt: string; constructor( _id?: string, email?: string, name?: string, city?: string, phoneNumber?: string, company?: string, createdAt?: string ) { this._id = _id; this.email = email; this.name = name; this.city = city; this.phoneNumber = phoneNumber; this.company = company; this.image = 'http://placehold.it/171x100'; this.createdAt = createdAt; } }
As you can see we just define what properties a contact instance can have and create a default value for the image
property. Arguments passed to the constructor
marked with ?
are optional.
At this moment, we should have everything in place; in case you missed something, you can check out the final version of the code.
The key takeaways from this chapter are as follows:
Building backend web services using Node.js, Express, and MongoDB
Writing tests first, before actually implementing functionalities
Making Angular 2 and Express communicate and work together
Getting into Reactive Extensions and reactive programming
Building a custom Angular HTTP service