Angular 앵귤러 배우기 - 4 네뷸라모듈설치 NebularModule

앞으로의 실습들의 디자인이 보기좋게 네뷸라 모듈을 설치합니다

보다 자세한내용은 여기에서 확인할수있습니다

https://akveo.github.io/nebular/docs/guides/add-into-existing-project#create-a-new-project

명령 프롬프트 ng add @nebular/theme

? Which Nebular theme do you want to use: default Enter

? Use customizable scss themes? Yes Enter

? Set up browser animations for Nebular? Yes Enter

그러면 파일이 추가되고 app.module.ts, styles.scss, app.component.html 파일이 수정됩니다

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app모듈에 네뷸라 사용을위한 모듈이 추가되었습니다

styles.scss

@import 'themes';

@import '~@nebular/theme/styles/globals';

@include nb-install() {
  @include nb-theme-global();
};
/* You can add global styles to this file, and also import other style files */

전역 스타일 파일에 네뷸라테마가 추가되었습니다

app.component.html

<nb-layout>

  <nb-layout-header fixed>
  <!-- Insert header here -->
  </nb-layout-header>

  <nb-layout-column>

    <h1>이것은 App 컴포넌트</h1>
    
    <app-demo></app-demo>
    <app-demo></app-demo>
    <app-demo></app-demo>
    <app-demo></app-demo>
    
    
    <router-outlet></router-outlet>
    
  </nb-layout-column>

  <nb-layout-footer fixed>
  <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>

기본 nb-layout을 알아서 수정해줬습니다

브라우저에서 확인해보면

이런 형태가 됩니다