Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2
Di bagian 2 kita akan membuat login page adminLTE. Berikut adalah langkahnya : Modifikasi app.component.html
1 |
<router-outlet></router-outlet> |
Buat Login Module
1 |
ng g m login --routing |
Buat Login Component di Dalam Login Module
1 |
ng g c ./login/login --skipTests=true |
Import LoginModule ke Dalam app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LoginModule } from './login/login.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, LoginModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Konfigurasi Login Routing pada login-routing.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './login/login.component'; const routes: Routes = [ {path: 'login', component: LoginComponent} ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class LoginRoutingModule { } |
Redirect ke login page sewaktu aplikasi di jalankan Modifikasi app-routing.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ {path: '', redirectTo: 'login', pathMatch: 'full'} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
Page Source AdminLTE Login Read more about Angular Tips 4 : Integrasi AdminLTE dengan Angular 8 Bagian 2[…]