Exposing our new service to other components
With the authentication service provider now available from our application injector, we can begin hooking it up in other components: the login feature is the most logical starting point. First, open the LoginComponent
code unit and import the new AuthenticationService
token so that we can properly use its type to inject it into the component:
app/login/login.component.ts
import { Component } from '@angular/core';
import {
FormBuilder,
ControlGroup,
Validators,
Control } from '@angular/common';
import { Router } from '@angular/router-deprecated';
import { AuthenticationService } from '../shared/shared';
...
In the same code unit, let’s now update the constructor payload with a new argument annotated with the AuthenticationService
token, so the Angular 2 DI machinery becomes aware that this module requires that type to be injected:
constructor(
formBuilder: FormBuilder,
private router: Router,
private authService: AuthService) {
// Rest of constructor implementation remains unchanged
...
}
With all the code in place, now we can replace our authenticate()
method to remove the business logic:
authenticate() { let credentials: any = this.loginForm.value; this.notValidCredentials = !this.loginForm.valid && this.loginForm.dirty; this.authenticationService.login(credentials).then(success => { if (success) { this.router.navigateByUrl('/'); } else { this.notValidCredentials = true; } }); }
You using the Deprecated router
Really!? What’s up with these sites which offer “one read” spanned across multiple pages, so it tricks people in order to get more page views :| so lame. I don’t know who’s ever going to actually navigate, instead of just looking for a different example elsewhere, which is accessible in one scroll – as this should have been.
hello , i want to make an authentication service that will have an funt
Really!? What’s up with these sites which offer “one read” spanned across multiple pages, so it tricks people in order to get more page views :| so lame. I don’t know who’s ever going to actually navigate, instead of just looking for a different example elsewhere, which is accessible in one scroll – as this should have been.
hi thanks for feedback , we have stopped using this format for our articles . checkout this article – http://unitedstatesnews.co/create-an-ecommerce-dashboard-with-angular-4/