Angularのコンポーネントの作成方法を解説

Angularでコンポーネントを作成するにはどうすればいいんだろう…

この記事では上記の悩みを解決します。

Angularでアプリ開発を行う際にまずコンポーネントを作成してそれぞれのファイルを編集する必要があります。

なので、まずはそのコンポーネント作成方法について本記事は具体的に解説していきます。

暇な時に予定を探せるyoteiPickerというアプリをリリースしているので、ぜひ使ってみてください。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】 この記事ではココナラに似てる副業サイトを11こ紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 本記事のゴール ココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】 転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！ この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

コンポーネントの作成方法

Angularでコンポーネントを作成する方法は以下のようにコマンドを叩きます。

sampleというコンポーネントを作成したい場合

yoteiPicker % ng generate component sample

src/app以下に、4つのコンポーネントファイルが作成されます。

src/app/sample/sample.component.css
src/app/sample/sample.component.html
src/app/sample/sample.component.spec.ts
src/app/sample/sample.component.ts

generateは省略可能なので、以下でも同じ結果が得られます。

yoteiPicker % ng g component sample 

また、src/app/component以下にコンポーネントを作成したい場合は、以下のようにコマンドを叩きます。

yoteiPicker % ng g component component/sample

以下のようにファイルが生成されます。

src/app/component/sample/sample.component.css
src/app/component/sample/sample.component.html
src/app/component/sample/sample.component.spec.ts
src/app/component/sample/sample.component.ts

生成されるコンポーネントの説明

ng g componentのコマンドを叩いた時に4つのファイルが生成されました。

その説明ですが、

.css→スタイルシート

.html→画面表示のhtmlファイル

.spec.ts→単体テスト

.ts→クリックなどの処理

サービスクラスの作成

先ほどはコンポーネントを作成しましたが、サービスクラスもコマンドで作成できます。

yoteiPicker % ng g service sample

以下のファイルが生成されます。

src/app/sample.service.spec.ts
src/app/sample.service.ts

モジュールファイルの作成

モジュールのファイルを作成する場合は以下のコマンドでファイルを生成できます。

yoteiPicker % ng g module sample

以下は生成されるファイルです。

src/app/sample/sample.module.ts

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】 この記事ではココナラに似てる副業サイトを11こ紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 本記事のゴール ココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】 転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！ この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。