Angular CLI をインストールして使用するにはどうすればよいですか? （写真と文章で詳しく解説）

この記事では、Angular CLI のインストールと使用方法のチュートリアルを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

はじめに:

「Angular」バージョンに関して、「Angular」は正式に Angular 1.x を Angular JS、Angular 2.x、および The上記は総称して「Angular」と呼ばれます。

関連チュートリアルの推奨事項: 「angular チュートリアル 」

「CLI」は「Command Line Interface」の略称で、開発プロセスの自動化を実現するコマンドラインインターフェイス。

例: ionic-cli、vue-cli など。プロジェクトの作成、ファイル (コンポーネント、サービスなど) の追加、テスト、パッケージ化、公開などの多くの開発タスクを実行できます。

Angular CLI をインストールします

1.nodejs と npm

をインストールする必要があります Node 公式 Web サイトのアドレス: https://nodejs.org/en

2. typescript をグローバルにインストールします。angular を推奨します。typescript (.ts ファイル) を使用して記述します。

Typescript 公式 Web サイトのアドレス: http://www.typescriptlang.org/index.html

使用コマンド:

 npm install -g typescript

3. angular-cli をインストールします

Angular-cli 公式 Web サイトのアドレス: https://cli.angular.io/

使用コマンド:

npm install -g @angular/cli

Image

注: インストールに時間がかかるためangular-cli 少し早いですが、インストールするときに私のバージョンでなくても問題ありません

新しい Angular プロジェクトを作成します

使用しますコマンド new

// ngStudy 是工程名称可以随意修改的
ng new ngStudy

プロジェクト アイコン

注: これには、140 MB

を超えるノードモジュールのダウンロードが必要になるため、長時間待つ必要があります。

生成されたプロジェクト構造:

Angular プロジェクトを実行します

コマンドserve

//需要进入工程的目录中
ng serve

#を使用します##アイコンを実行します

インターフェースアクセス

最後に書いてあります

1.インストールプロセスでは、多くの依存パッケージが海外からのものであるため、ダウンロードできない場合があります。 「Blue Lantern」エージェント

2。プロジェクトのディレクトリ構造については、中国語 Web サイトの公式説明書を参照してください: https://angular.cn/guide/quickstart

3. コマンドラインの使用方法のアドレス: https://github.com/angular/angular-cli/wiki 公式のものを貼り付けます 一般的に使用されるコマンドの図

4. 導入angular-cli を更新するバージョン方法

# npm install -g @angular/cli を直接使用して更新できます

##プログラミング関連の知識については、次を参照してください。

プログラミング入門

をご覧ください。 ！

以上がAngular CLI をインストールして使用するにはどうすればよいですか? （写真と文章で詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。