Angular ベーシック

さて、どんどんアンギュラっていきます。

今回は、復習を兼ねてプロジェクトの雛形つくりませうか。
まいどまいどで、IDEはVS Codeです。

１）新規プロジェクト作成
コンソール開いて次を実行

ng new new-project

２）ブートストラップ入れる
作成されたプロジェクトに移動して、ブートストラップをインストール。

cd new-project
npm install bootstrap

３）必要なソースを作成する
dash-board、core、shared、rootingです。
ダッシュボードについては、名前はなんでも良いんですけど、とりあえず。

ng g component dash-board --module=app
ng g module core
ng g module shared
ng g module app-rooting --flat --module=app

よし。下準備完了。

４）VSCを開く

５）共通モジュールを準備する
場所： new-project/src/app/shared/shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [
    CommonModule,
    FormsModule
  ],
  declarations: []
})
export class SharedModule { }

FormsModuleだけ追加してあります。

６）コアモジュールを準備する
場所： new-project/src/app/core/core.module.ts

import { NgModule , Optional, SkipSelf} from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule){
    if (parentModule) {
      throw new Error( 'Error' );
    }
  }
}

複数回読み込みされないようにしてあります。

７）appモジュールを準備する
場所： new-project/src/app/app.module.ts

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

import { AppComponent } from './app.component';
import { DashBoardComponent } from './dash-board/dash-board.component';
import { AppRootingModule } from './/app-rooting.module';
import { SharedModule } from './shared/shared.module';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
    DashBoardComponent
  ],
  imports: [
    BrowserModule,
    AppRootingModule,
    SharedModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

場所： new-project/src/app/app.component.html

<router-outlet></router-outlet>

８）ルーティングモジュールを準備する
場所： new-project/src/app/app-rooting.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { DashBoardComponent } from './dash-board/dash-board.component';

const routes: Routes = [
  { path: '', component: DashBoardComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
  declarations: []
})
export class AppRootingModule { }

よーし。

あとは、

ng serve

でサーバー動かして画面確認してみてくださいまし。