前回の記事では、Angularプロジェクトの環境をセットアップする方法について説明しました。また、新しいAngularプロジェクトを立ち上げました。見逃した場合は、以下のリンクを使用して最初の記事を参照してください。👇

続けましょう。

これは、前回の記事で作成したAngularプロジェクトです。👇

Angularのコンポーネント

• Angularアプリケーションでは、コンポーネントが主要な構成要素です。
• 「app.component」は、angularをインストールするときに取得するデフォルトのコンポーネントです。各コンポーネントは4つのファイルで構成されています。

1. 再利用性
2. ユニットテストが簡単
3. 読みやすい。
4. メンテナンスが簡単。

• 新しいコンポーネントを作成するには、Visual StudioCodeでコマンドプロンプトまたはターミナルを使用します。

VS Codeのトップバーにある[ターミナル]をクリックし、[新しいターミナル]を選択します。

• 新しいコンポーネントを生成するには、端末で「ng generate component <component-name>」と入力します。（例：「nggeneratecomponentnewComp」。「newComp」はコンポーネントの名前です。）
• 4つのファイルを作成し、1つのファイルを更新します。

• 作成したコンポーネントファイルを開くと、上記の作成済みファイルが表示されます。

• 'app.module.ts'ファイルを開くと、新しいコンポーネントがインポートされていることがわかります。その理由は、Angularがコンポーネントの作成時に自動的に更新するためです。作成されたコンポーネントの宣言も、「@ NgModule」内で自動的に宣言されます。

• 'new-comp.component.ts'ファイルを開きます。
• 'selector'の値を選択し、クリップボードにコピーします。

• 'app.component.html'ファイルを開き、以下の 'app.component.html'ファイルのセレクターの値を使用して新しいタグを開きます。

• ブラウザを開きます。以下のような結果が得られます。👇

• ブラウザの出力を考慮して、「Helloworld！」メッセージは「app.component.ts」から送信されます。VS Codeで「app.component.html」ファイルを開くと、「Helloworld！」が表示されます。'<h1>'タグ内のテキスト。

h1{
color : blue;
}

      

• 「new-compは動作します！」メッセージは「new-comp.component.ts」から送信されます。VS Codeで「new-comp.component.html」を開くと、「new-compworks！」が表示されます。'<p>'タグ内のテキスト。

p{
color : grey;
font-style : italic;
}

      

• 'app.component.html'に新しい段落を追加しましょう。VS Codeを開き、「app.component.html」に以下のように入力します。

<p>Welcome to the first Angular project </p>

       

• 'app.component.html'の段落のスタイルを変更するには、VSCodeで 'app.component.css'ファイルを開き、次のように入力します。

p{
color: red;
font-size: 20px;
}

       

両方のコンポーネントに同じ「<p>」タグがあります。あらゆるものにカスタムスタイルを書くことができます。したがって、そのために特定のIDやクラスは必要ありません。

この記事を楽しんだり、役に立ったと思ったら、👏ボタンを押して、このような記事をフォローしてください。

plainenglish.ioのその他のコンテンツ