Angularプロジェクトの実行方法[ステップバイステップの説明]

AngularJSは、フルスタック開発者にとってなくてはならないものです。 HTMLディレクティブの使用を簡素化するため、フロントエンド開発にとって非常に重要です。 Angularを使用すると、Webアプリの開発がはるかに簡単になります。 そのため、この記事では、Angularを使い始める方法について説明します。 Angularをインストールする方法とAngularプロジェクトを実行する方法について説明します。

Angular CLI：簡単な紹介

Angularプロジェクトで作業する場合は、AngularCLIが必要です。 これは、Angularプロジェクトに取り組み、それらを初期化するためのAngularの公式ツールです。 Angular CLIは、初期化プロセスからの多くの手間を軽減します。 Angular CLIを使用している場合、プロジェクトを開始するために複数の構成やビルドツールを実行する必要はありません。

Angular CLIを使用すると、1つのコマンドだけでプロジェクトを開始できます。 別のコマンドを使用すると、ローカル開発サーバーを使用してプロジェクトを提供できます。 AngularCLIはNode.jsで動作します。 したがって、システムでAngular CLIを実行するには、最初にシステムにNode.jsをインストールする必要があります。

Node.jsはサーバー用であり、サーバー側アプリケーションを開発するためのものであり、Angularはフロントエンドソリューションです。 Node.jsは、AngularCLIでのみ役立ちます。

Angularをインストールするにはどうすればいいですか？

最初の一歩

システムにAngularをインストールする前に、システムにNodeとnpmが必要です。 Node Version Managerを使用してインストールすることも、OSの公式パッケージマネージャーを使用することもできます。 WebサイトからNodeをインストールするオプションもあります。 すばやく簡単にインストールできるため、Webサイトからインストールすることをお勧めします。 node.jsのダウンロードページにアクセスするだけです。

第二段階

node.jsのダウンロードページが表示されたら、オペレーティングシステムに応じて必要なバージョンを選択し、インストールウィザードで指定された手順に従います。 以前にnode.jsをシステムにインストールしたことがある場合は、この手順（および前の手順）をスキップできます。

3番目のステップ：

Nodeがデバイスにインストールされているかどうかを確認するには、コマンドプロンプトを開き、次のコマンドを実行します。

$ node -v

システムに現在インストールされているNodeのバージョンが表示されます。

3番目のステップ

システムにNodeがインストールされているかどうかを確認した後、コマンドプロンプトの次のコマンドを実行して、デバイスにAngularをインストールできます。

$ npm install @ angle / cli

上記のコマンドを実行すると、AngularCLIがデバイスにインストールされます。 「Angularのインストール方法」の部分を完了しました。

学ぶ：インドのAngular Developer Salary：新入生と経験者向け

Angularプロジェクトを実行する方法は？

システムにAngularをインストールしたので、新しいプロジェクトの開始に集中します。

最初の一歩

次のコマンドを実行して、ワークスペースとスターターアプリを作成します。

ng新しいangular-tour-of-heroes

ワークスペースの名前として、angular-tour-of-heroesを追加しました。 'ng new'コマンドは、スターターアプリに追加する機能についてプロンプトを表示します。 チュートリアルなので、デフォルトを選択し、ReturnキーまたはEnterキーを押して続行します。

第二段階

これで、AngularCLIは必要なnpmパッケージと依存関係をインストールしました。 「ようこそアプリ」と新しいワークスペースを使用する準備が整いました。 また、アプリと同じ名前のルートフォルダー（angular-tour-of-heroes）とスケルトンアプリプロジェクトもあります。

このステップでは、アプリケーションを提供する必要があります。 これを行うには、ワークスペースディレクトリに移動して、アプリを起動します。

cdangular-tour-of-heroes

ngサーブ–オープン

「ngserve」コマンドは、アプリを作成し、開発サーバーを起動し、プロジェクトのソースファイルを管理し、必要なファイルを変更しながらアプリを再構築します。

3番目のステップ

アプリを変更する場合は、IDEまたはエディターのsrc/appフォルダーに移動する必要があります。 このプロジェクトのコンポーネントを変更して、アプリを編集します。 コンポーネントはAngularアプリの構成要素です。 これらは、データの表示、入力への応答など、Angularプロジェクトのほぼすべての基本的な機能を処理します。

このステップでは、IDEを開き、プロジェクトディレクトリに移動して、プロジェクトのコンポーネントファイルを見つけます。

• app.component.ts
• app.component.html
• app.component.css

最初のファイルはクラスコードであり、TypeScriptに基づいており、2番目のファイルはHTMLのテンプレートであり、最後のファイルはプライベートCSSスタイルを持っています。

4番目のステップ

プロジェクトが設定され、すべてのファイルの準備が整いました。 このステップでは、タイトルを追加してパーソナライズします。 Angularプロジェクトのタイトルを変更するには、app.component.tsファイルに移動し、存在するデフォルトのテンプレートを削除します。 AngularCLIは生成テンプレートを自動的に生成します。 次のように置き換えることができます。

<h1>{{あなたのタイトル}}</h1>

中括弧は、補間バインディング構文です。 'yourtitle'を希望のタイトルに置き換えることができます。 目的のタイトルを入力したら、ブラウザを更新すると、アプリケーションに新しいタイトルが付けられます。

5番目のステップ

アプリのパーソナライズは、スタイリングなしでは不完全です。 したがって、このステップでは、Angularアプリのスタイルを変更します。 Angular CLIは、新しいプロジェクトを作成するときに、アプリケーション用に空のstyles.cssを生成します。 ここに希望のスタイルを入力できます。

IDEでsrc/styles.cssファイルを開き、アプリケーションのスタイルの変更を開始します。 アプリのスタイルを変更し、変更を保存します。 ブラウザを更新すると、アプリの変更が表示されます。

チェックアウト： Angular JSでページネーションを実装する方法は？

Angularおよびフルスタック開発の詳細

これで、システムにAngularをインストールする方法と、Angularプロジェクトを実行する方法がわかりました。 ハングアップすると、Angularでの作業が思ったよりはるかに簡単であることがわかります。 少しの経験で、Angularを使用したフロントエンドWeb開発プロジェクトの作業を開始できます。

AngularとフロントエンドのWeb開発について詳しく知りたい場合は、次の追加リソースをご覧ください。

• フロントエンド開発者履歴書ガイド
• フロントエンド開発者になるためのトップ10スキル
• フロントエンドプロジェクトのアイデア

一方、フルスタックの開発コースを受講して、ビデオ、プロジェクト、およびクイズを通じて業界の専門家から学ぶことができます。

フルスタックソフトウェア開発の詳細に興味がある場合は、upGrad＆IIIT-Bのフルスタックソフトウェア開発のPGディプロマをチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニング、9以上のプロジェクト、および割り当てを提供します。 、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、トップ企業との雇用支援。