初心者向けのAngular9 — AngularCLIを使用して最初のアプリをインストールする方法

Angularは、Googleによって作成および開発された最も人気のあるJavaScriptフレームワークの1つです。ここ数年で、ReactJSは多くの関心を集め、業界で最も人気のある最新のJSライブラリになりました。しかし、これはAngularがもはや重要ではないという意味ではありません。

それどころか、AngularはGoogleトレンド(全世界)によるとReactに次いで2番目に人気のあるフレームワークです。

フロントエンド開発者として、私はAngularと協力してきました。これからの記事でAngularのいくつかの重要な機能について説明したいと思います。

  • パート1: Angular CLIを使用して最初のアプリをインストールする方法(現在はここにいます)
  • パート2:角度コンポーネントと文字列補間
  • パート3:角度ディレクティブとパイプ
  • パート4: Angularでの一方向のデータバインディング
  • パート5: ngModelを使用したAngular双方向データバインディング

Angular for Beginnersシリーズの最初のパートでは、Angular&Angular CLIとは何か、およびCLIを使用して最初のAngularアプリをインストールする方法を学習します。

前提条件

Angularの学習を開始する前に、次の言語に慣れていない場合は、それらに精通することをお勧めします。

  • HTML、CSS
  • JavaScript / ES6
  • TypeScript

必要に応じて、以下のチュートリアルビデオを見ることができます。

Angularとは何ですか?

Angularは、フロントエンドアプリケーションを構築するためにGoogleによって開発および保守されているJavaScriptフレームワークです。まず、フレームワークとは何かを説明しましょう…

フレームワークとは何ですか?

フレームワークは、独自の機能とライブラリを備えた完全なパッケージです。フレームワークには独自のルールがあり、柔軟性はあまりなく、プロジェクトは使用するフレームワークに依存しています。Angularはフレームワークの一例です。

Angularは2016年にリリースされましたが、Angularの前にはAngularJSがありました。Angularに関して最もよく聞かれる質問の1つは、AngularJSとAngularの違いは何ですか?

AngularJSとAngular

Angularのこれら2つのバージョンは、多くの開発者を混乱させます。AngularJSとAngularは完全に異なるフレームワークです。Angularバージョン(1、1.2、1.5など)はAngular JSと呼ばれ、バージョン2以降以降はAngularと呼ばれます。

  • AngularJS→1.xからのバージョン
  • Angular→バージョン2以降

したがって、Angularバージョン2はAngularJSフレームワークを完全に書き直したものであり、新しいバージョン(4、5、6など)はAngularバージョン2のマイナーな変更です。

この一連の記事では、Angular2 +について学習します。

Angular CLIとは何ですか?

CLIはコマンドラインインターフェイスの略です。Angularには独自の公式CLIがあり、開発プロセス中に多くのことを支援してくれます。

Angular CLIは、手動で行うのではなく、Angularプロジェクトの操作を自動化するために使用されています。CLIは、Angularプロジェクトで開発者を最初から最後までサポートします。

たとえば、AngularCLIは次の目的で使用できます。

  • 構成、環境設定
  • 建物のコンポーネント、サービス、ルーティングシステム
  • プロジェクトの開始、テスト、および展開
  • サードパーティライブラリ(Bootstrap、Sassなど)のインストール

とはるかに。それでは、CLIを使用して最初のAngularアプリをインストールする方法を段階的に見ていきましょう。

ステップ1:NPM(Node Package Manager)をインストールする

まず、Nodejsが必要になります。NPM(ノードパッケージマネージャー、ノードjsの一部)は、サードパーティのライブラリと依存関係をプロジェクトにインストールするためのツールです。まだお持ちでない場合は、こちらからダウンロードしてインストールできます。また、チュートリアルビデオで段階的に説明しました。

ステップ2:AngularCLIをインストールする

ノードjsがインストールされている場合、次のステップはAngularCLI自体をコンピューターにインストールすることです。

npm install -g @angular/cli

gグローバルインストールを表します。後で-gを使用すると、コンピューター上の任意のAngularプロジェクトでCLIを使用できます。

ヒントng vコマンドラインインターフェイス(またはターミナル)に入力して、Angularのバージョンを確認します。

ステップ3:新しいAngularプロジェクトを作成する

インストールが完了したら、Angular CLIを使用して、次のコマンドで新しいAngularプロジェクトを作成できます。

ng new my-first-app

このコマンドは、必要なすべての依存関係とファイルを含む新しいAngularプロジェクト(my-first-appという名前で、任意の名前を使用できます)を作成します。CLIが自動的に行うので、何も心配する必要はありません。

ステップ4:アプリを実行する

CLIをインストールして新しいAngularアプリを作成したら、最後のステップはプロジェクトを開始することです。これを行うには、次のコマンドを使用する必要があります。

ng serve -- open

「開く」フラグは、ローカルブラウザウィンドウを自動的に開きます。

Angularはライブサーバーをサポートしているため、ブラウザーのページを更新しなくても、ローカルで変更を確認できます。詳細と更新については、公式ドキュメントも確認してください。

結論

そのため、最初の部分では、Angularの概要、CLIとは何か、最初のAngularアプリのインストール方法について説明しました。2番目の投稿では、Angularコンポーネントと文字列補間について学習します。乞うご期待 :)

Web開発についてもっと知りたい場合は、Youtubeで私フォローしてください

読んでくれてありがとう!