Angular CLI インストール チュートリアル

この記事では、Angular の開発と学習のための Angular CLI のインストールと使用方法を主に紹介し、参考として提供します。

以前から開発環境を準備しており、正式に開発できるようになりました。前述したように、Angular はプログラム開発を簡素化できるコマンド ライン ツールを提供します。このツールは将来の開発にも使用するため、最初に Angular CLI と呼ばれるこの開発ツールをインストールする必要があります。

CLI をインストールするプロセスは非常に簡単で、他のツールのインストールや一般的な開発パッケージのインストールと何ら変わりません。 NPM レジストリを構成し、yarn を正常にインストールしたので、yarn を使用してこのツールをインストールできます。具体的なコマンドは次のとおりです。

yarn global add @angular/cli

パラメータ global はグローバル インストールを示し、add は「add」を示します。最後は CLI パッケージ名であり、バージョンは示されません。そのため、yarn は最新バージョンの CLI をインストールするように求められます。 。このステートメントは、以前の NPM の global 说明是在全局安装； add 说明是在“添加”；最后是 CLI 的包名，没有注明版本好的话，会让 yarn 安装最新版的 CLI。。这一语句与之前 NPM 的

npm install -g @angular/cli

是等价的。

之后我们运行

ng version

如果能够输出 Angular CLI 的版本号，说明安装成功。注意，Angular CLI 的所有命令都是以 ng 开始的。

Angular CLI 建立在 webpack 基础之上，可以帮助我们生成 Angular 项目框架，生成 Angular 模块、组件、指令等。如果手动搭建这一开发环境，需要了解 webpack 的各种细节、编写各种自动化脚本等，要求较高的前端开发技术。考虑到我们的基础教程，使用 CLI 辅助开发无疑是合适的。我们会在后面的章节中详细介绍 Angular CLI 的使用，如果你对 Angular CLI 感兴趣，可以通过其官方网站 了解更多的细节。

刚刚安装完成的 CLI 默认使用 NPM 作为包管理工具。我们希望使用 yarn，只需运行下面的命令：

ng set --global packageManager=yarn

反之，如果想换回 NPM，只需使用

ng set --global packageManager=npm

即可。

安装好 Angular CLI，下面我们来创建第一个示例工程，了解 Angular CLI 的基本使用。

首先，使用

ng new demo

创建一个演示项目。 new 是创建一个全新项目，后面的 demo 是项目的名字。Angular CLI 会帮我们生成完整的项目框架——包括项目所需所有文件、文件结构以及各种辅助文件等。之后，Angular CLI 会自动运行 yarn install ，这是在安装项目所需要的各种依赖。安装过程会比较漫长，需要耐心等待一段时间。

当出现类似上面的界面，提示“Projecy ‘demo' successfully created”时，表示项目已经创建完成。如果有错误，需要检查安装过程或者网络连接等。

项目创建完毕，会在当前目录下生成一个项目文件夹。之后我们可以进入项目目录

cd demo

然后运行

ng serve

ng serve

ng build --prod

に相当します。

その後

rrreee

を実行してAngular CLIのバージョン番号が出力できればインストール成功です。すべての Angular CLI コマンドは ng で始まることに注意してください。

Angular CLI は webpack 上に構築されます。 Angular プロジェクト フレームワークの生成、Angular モジュール、コンポーネント、手順などの生成にご協力ください。この開発環境を手動で構築する場合、Webpackのさまざまな詳細を理解し、さまざまな自動スクリプトを記述する必要があり、より高度なフロントエンド開発技術が必要になります。基本的なチュートリアルを考慮すると、開発を支援するために CLI を使用することは間違いなく適切です。 Angular CLI の使用方法については後続の章で詳しく紹介しますので、Angular CLI に興味がある場合は、公式 Web サイトで詳細を確認してください。

インストールしたばかりの CLI は、デフォルトで NPM をパッケージ管理ツールとして使用します。 Yarn を使用したい場合は、次のコマンドを実行するだけです:

rrreee

一方、NPM に戻したい場合は、

rrreee🎜 を使用するだけです。 🎜🎜Angular CLI をインストールした後、Angular CLI の基本的な使用法を理解するために最初のサンプル プロジェクトを作成しましょう。 🎜🎜まず、🎜rrreee🎜を使用してデモプロジェクトを作成します。 new は新しいプロジェクトを作成することを意味し、次の demo はプロジェクトの名前です。 Angular CLI は、プロジェクトに必要なすべてのファイル、ファイル構造、さまざまな補助ファイルを含む、完全なプロジェクト フレームワークを生成するのに役立ちます。その後、Angular CLI は yarn install を自動的に実行し、プロジェクトに必要なさまざまな依存関係をインストールします。インストールプロセスには長い時間がかかるため、しばらく辛抱強く待つ必要があります。 🎜🎜🎜🎜上記のようなインターフェースが表示されたら、 「プロジェクト「デモ」が正常に作成されました」というプロンプトが表示されます。これは、プロジェクトが作成されたことを意味します。エラーが発生した場合は、インストールプロセスやネットワーク接続などを確認する必要があります。 🎜🎜プロジェクトが作成されると、カレントディレクトリにプロジェクトフォルダーが生成されます。その後、プロジェクト ディレクトリ 🎜rrreee🎜 に入り、🎜rrreee🎜🎜🎜ngserve このコマンドはプロジェクトをコンパイルし、内蔵の小型サーバーを起動します。ブラウザを通じてプロジェクトの実行結果を表示できます。上記のヒントに注意してください: NG Live Development Server は localhost:4200 でリッスンしています。http://localhost:4200/ でブラウザを開きます。つまり、このサーバーのアドレスは http://localhost:4200 である必要があります。ブラウザでこのアドレスにアクセスするだけです: 🎜🎜🎜🎜🎜デフォルトで Angular CLI によって生成されたプロジェクト ページの実行結果を確認できます。 🎜🎜この内蔵サーバーは開発とテストのみに適しており、実際に使用するサーバーとしては使用できないことに注意してください。したがって、正式なサーバーにデプロイする場合は、プロジェクトをリリース バージョンにコンパイルする必要があります。リリース バージョンのコンパイルも非常に簡単です: 🎜rrreee🎜 1 つのコマンドを使用するだけです。コンパイルが完了したら、プロジェクト フォルダーを開くと、その中にプロジェクト全体を実行するために必要なファイルが表示されます。アプリケーションをデプロイするときは、このフォルダー内のすべてのファイルをサーバーにデプロイするだけで済みます。 🎜🎜プロジェクトの作成から始まり、プロジェクトの開発とテスト、そして最後にプロジェクトのパッケージ化とデプロイまで、すべて Angular CLI が提供するさまざまな機能を使用します。ご覧のとおり、Angular CLI はワンストップ開発モデルを提供しており、Angular CLI を使用して Angular プロジェクトを簡単に開発できます。ただし、ここで説明するのは最も単純な使用法にすぎません。正式な使用法では、必要なファイルとプロジェクトを生成するために多くの追加パラメーターが追加される場合があります。詳細については、Angular CLI ドキュメントを読む必要があります。以降の章で、関連する内容が見つかった場合は、再度紹介します。 🎜🎜上記は私があなたのためにまとめたものです。 🎜

関連記事:

JavaScriptを使用した非同期よりも優れたソリューション?

Koaを使用してNode.jsを通じてプロジェクトを構築する

React Native Flexboxレイアウトの詳細な解釈

以上がAngular CLI インストール チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。