Angularの基本2(コンポーネントとルーティングモジュールの作成)

目次

1.Angularの開発環境
(1)ホストOS
 Windows 10 Pro
(2)仮想環境(VirtualBox)
 ・ゲストOS:CentOs8(Red Hat 64-bit)
 ・Node.js:v14.18.1($ node –version)
 ※Nodejsのv16.13.0はAngular CLIでサポートされていないため、v14.18.1に変更した。
 ・npm:6.14.11($ npm –version)
 ・Angular CLI:12.2.12($ ng –version)

2.Angularアプリケーションの作成
 Menu、Menue1、Menu2のコンポーネントを作成し、Menuの画面からMenu1、又はMenu2を呼び出す。また、Menu1とMenu2には「back」を選択することでMenuに戻る。

2.1 プロジェクトの作成
(1)Angular CLI コマンドを実行
 ng new
 $ ng new angular-sample1
 ? Would you like to add Angular routing? Yes
 ? Which stylesheet format would you like to use? CSS
 ※プロジェクト名はsample-1は無効、sample1は有効。
(2)Angularサンプル画面の表示
 project-nameのフォルダで下記コマンドを実行する。
 $ ng serve –host 0.0.0.0 –port 8080

・仮想マシンのブラウザで下記urlに接続
http://127.0.0.1:8080

2.2 コンポーネントの作成
(1)ターミナルウィンドウから、アプリケーションを含むディレクトリに移動
(2)Angular CLI コマンドを実行
  ng generate component <component-name>
$ ng generate component menu
$ ng generate component menu1
$ ng generate component menu2

src/app/に追加したコンポーネントの名前のフォルダが作成される
・コンポーネントファイル .component.ts
・テンプレートファイル .component.html
・CSS ファイル .component.css
・テスト仕様ファイル .component.spec.ts

(3)コンポーネントとテンプレートの作成
「menu.component.html」

「menu.component.ts」

「menu1.component.html」

「menu1.component.ts」

「menu2.component.html」

「menu2.component.ts」

(4)ルートコンポーネント
AngularCLIコマンドでプロジェクトを作成するとき自動的に作成される。
ルートコンポーネントはアプリ起動時に最初に呼び出される。
「app.component.html」

・<router-outlet>はルーティングされたビューをどこに表示するかをルーターに教える
(参考)
ルーティングを使ったナビゲーションの追加
https://angular.jp/tutorial/toh-pt5

「app.component.ts」

(5)ルートモジュール
  アプリを起動するときに呼び出されるモジュール。
 AngularCLIコマンドでコンポーネントを作成するとき自動的に追加される。
「app.module.ts」

(6)ルーティングモジュール
 プロジェクト作成時にルーティングモジュールの追加を行っていないときはルーティングモジュールを作成する。
「app-routing.module.ts」

・@NgModuleメタデータはルーターを初期化し、ブラウザのロケーションの変更を待機する。

(7)メインページ
 アプリを動作させるためのメインページはアプリケーションルート直下(/srcフォルダー)に配置される。
「index.html」

The end