Home / Questions / 98031
Accepted
Diego
Asked: 2020-08-29 12:08:58 +0800 CST 2020-08-29 12:08:58 +0800 CST

Angular project structure

  • 772

I am analyzing how to start a project with Angular.

In a previous one, which we currently have running, assembled with AngularJS 1.5, with a structure similar to the one I'm looking for, which is a login screen, which, if the user exists, takes you to a website.

This was structured with an abstract template, which has 2 children, one for the login and the other for the menu template, which is used throughout the internal structure of the web.

I have the doubt that in Angular 4 the project should not be structured like this. Can you give me a hand on how to set up this structure?

angular2-template

1 Answers

  1. Best Answer

    Given the fact that you use the router in your Angular 2+ project, you can choose to have your authentication component and your other intranet components routed and so from a third component, for example app-component have there the <router-outlet>angular one that controls what to show.

    AppComponent.html

    <app-menu-intranet *ngIf="authenticated"></app-menu-intranet>
<router-outlet></router-outlet>

    LoginComponent.html

    <form (submit)="onSubmit()">
  <input type="email" [(ngModel)]="email">
  <input type="password" [(ngModel)]="password">
  <button>LOGIN</button>
</form>

    Dashboard.html

    <main>
  <h1>Bienvenid@</h1>
</main>

    Here the important thing is to have Guards , which are nothing more than the interceptors or middlewares of the angular routes. This is where you decide if the dashboard can be seen only if the user is authenticated.

    const routes: Route = [
    { path: 'login', component: LoginComponent },
    { path: 'dashboard', component: DashboardComponent, canActivate: [ AuthGuard ] },
    { path: '**', pathMatch: 'full', redirectTo: 'login' }
];

    update

    An example of a Guard

    @Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }

}
    • 1