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のファイル
このようなフォルダ構成になっています。
今回はモジュールとコンポーネントの作成方法について書いていきました。