Angularのモジュール、コンポーネントの作成

今回もタイトルの通り、モジュールとコンポーネントの作成をおこなっていきたいと思います。

SPA開発では基本的にはコンポーネント単位で区切って開発していくのでモジュール、コンポーネントの作成は必須です。

モジュールの作成方法からしていきましょう。

ng g module モジュール名

これをターミナルで実行すればモジュール作成ができます。*モジュール名は任意のものを入れてください。ちなみにgとはgenerateの略です。

ng generate module モジュール名

こう書いても同じです。ルーティング機能を入れたければ

ng generate module モジュール名 --routing

--routing を追記すればルーティング機能を追加できます。

次にコンポーネントの作成方法です。

ng g c コンポーネント名

これで作成することができます。cはcomponentの略です。しかし、このままですと、ルートディレクトリにコンポーネントが作成されてしまいます。それではまずいので、今回は例としてhomeモジュールを作成したとします。そこの直下にhomeコンポーネントをぶら下げたい場合は

ng g c home/home -m home

こう書きます。「/」で区切ることによってhomeディレクトリの中にhomeコンポーネントを作成します。と言うことで、　-mでhomeディレクトリに依存しますと言うことです。間違った認識をしていたらすみませんw　このコマンドを叩くとhomeディレクトリの中にhomeコンポーネントが作成されます。

このようにファイルが生成される。

・routing.module.ts　routingを設定するファイル

・module.ts　自分のプロジェクトで使うモジュール、コンポーネントのインポートや定義するファイル

・html, scss　マークアップ、スタイルのファイル

・spec.ts　Tsのテストファイル

・ts　Tsのファイル

このようなフォルダ構成になっています。

今回はモジュールとコンポーネントの作成方法について書いていきました。