红色经典背景纯音乐

書名： MEAN Blueprints
作者名： Robert Onodi
本章字數： 595字
更新時間： 2021-07-16 10:40:20

Finishing touch

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
Securing our API routes using Passport
Making Angular 2 and Express communicate and work together
Getting into Reactive Extensions and reactive programming
Building a custom Angular HTTP service

官术网_书友最值得收藏!

MEAN Blueprints

Finishing touch