Angular 5.0 開発環境のセットアップと最初の ng5 プロジェクトの作成

この記事では、主に angularjs の開発環境のセットアップ方法と最初の ng5 プロジェクトの作成方法を紹介します。では、この記事を一緒に見ていきましょう

1. Node.jsをインストールします

作業を始める前に、開発環境をセットアップする必要があります。
マシンに Node.js® と npm がまだない場合は、最初にインストールしてください。
Node.js の公式 Web サイト (https://nodejs.org/en/) にアクセスし、ダウンロード ボタンをクリックして最新バージョンをダウンロードし、次のステップでそれをインストールするだけで、ソフトウェアが自動的に環境に書き込まれます。変数を使用できるため、cmd コマンド ウィンドウで直接、node または npm (パッケージ管理ツール) コマンドを使用できます。

まずターミナル/コンソールウィンドウでコマンドnode -vおよびnpm -vを実行して、node 6.9.xおよびnpm 3.x.x以降を実行していることを確認してください。 古いバージョンではエラーが発生する可能性がありますが、新しいバージョンでは問題ありません。

2. cnpm のインストール (オプションの操作)

npm の正式名は、NodeJS パッケージ管理および配布ツールであり、Node モジュール (パッケージ) を公開するための非公式の標準となっています。
npm インストール プラグインは外部サーバーからダウンロードされるため、ネットワークの影響を大きく受け、例外が発生する可能性があります。その後、Taobao チームは、npm の代わりに cnpm を使用して、完全な npmjs.org イメージを作成しました。はnodejsのnpmと同じですが、コマンドを実行するだけなので、npmをcnpmに変更します。
cmd コマンド ウィンドウに「」と入力し、Enter キーを押します。

npm install cnpm -g --registry=https://registry.npm.taobao.org

インストールが完了したら、「cnpm -v」と入力します。バージョン番号が表示されます。これは、インストールが成功したことを意味します。
インターネット速度が十分に速い場合、cnpm のインストールはオプションです。筆者はかつて cnpm を使用して ng5 プロジェクトの依存関係ファイルをダウンロードしましたが、開発中に影響はありませんでしたが、ng build --prod を使用するとエラーが発生しました。何が問題だったのかはまだわかりません。したがって、以下の操作は npm に基づいています。

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

cmd に次のコマンドを入力して、Angular CLI をグローバルにインストールします。

npm install -g @angular/cli

次に、ng -v と入力します。バージョン番号が表示されたら、インストールは成功です。Angular CLI のバージョン番号が 1.5 以降であれば、新しく作成されたプロジェクトは Angular 5.0 バージョンになります。
ngはangularの略です。

4. IDE をインストールします

統合開発環境 (IDE、統合開発環境) は、一般的にコード エディター、コンパイラー、デバッガー、グラフィカル ユーザー インターフェイスなどのツールを含む、プログラム開発環境を提供するために使用されるアプリケーションです。コード記述機能、解析機能、コンパイル機能、デバッグ機能などを統合した統合開発ソフトウェアサービススイートです。この機能を備えたすべてのソフトウェアまたはソフトウェア パッケージ (グループ) を統合開発環境と呼ぶことができます。
Angular IDE by Webclipse
intellij idea
Visual Studio Code
webstorm
作業効率を向上させる、好みの使い慣れた IDE を選択してください。作者のIDEはwebstormです。

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

ターミナルウィンドウを開きます。

次のコマンドを実行して、新しいプロジェクトとアプリケーションのスケルトン コードを生成します。

ng new my-app

my-app はプロジェクトの名前であり、必要に応じて定義できます。

しばらくお待ちください。 新しいプロジェクトを作成するには、ほとんどの場合、約 2 億を超える npm パッケージをインストールするのに時間がかかります。

プロジェクトディレクトリに入り、サーバーを起動します。

cd my-app
ng serve --open

ngserve コマンドは開発サーバーを起動し、ファイルの変更をリッスンし、これらのファイルが変更されたときにアプリケーションを再構築します。
--open (または -o) パラメーターを使用して、ブラウザーを自動的に開き、http://localhost:4200/ にアクセスします。

このアプリは次のメッセージであなたを迎えます:

6. 最初の Angular コンポーネントを編集します

この CLI は最初の Angular コンポーネントを作成します。 これは、app-root と呼ばれるルート コンポーネントです。 これは ./src/app/app.component.ts ディレクトリにあります。

このコンポーネント ファイルを開き、タイトル属性を Welcome to app!! から Welcome to My First Angular App!! に変更します:

src/app/app.component.ts:

export class AppComponent {
  title = 'My First Angular App';
}

ブラウザが自動的に更新され、修正されたタイトルが表示されます。悪くはないですが、見た目はもう少し良くてもいいかもしれません。

src/app/app.component.css を開き、このコンポーネントのスタイルをいくつか設定します。

src/app/app.component.css:

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

最初の Angular コンポーネントの編集が成功しました。

7. プロジェクト ファイルの概要

Angular CLI プロジェクトは、エンタープライズ ソリューションの迅速な実験と開発の基礎です。

最初に確認する必要があるファイルは README.md です。 CLI コマンドの使用方法に関する基本的な情報を提供します。

7.1 src フォルダー

アプリケーション コードは src フォルダーにあります。 すべての Angular コンポーネント、テンプレート、スタイル、画像、アプリに必要なものはすべてそこにあります。 このフォルダー外のファイルは、アプリケーションの構築をサポートするために使用されます。

app/app.component.{ts,html,css,spec.ts}
HTML テンプレート、CSS スタイル、単体テストを使用して AppComponent コンポーネントを定義します。 これはルート コンポーネントであり、アプリケーションが成長するにつれて、コンポーネント ツリーのルート ノードになります。

app/app.module.ts
AppModule を定義します。このルート モジュールは、Angular にアプリケーションのアセンブル方法を指示します。 現在、AppComponent のみを宣言しています。 後でさらにコンポーネントを宣言します。

assets/*
アプリケーションをビルドするときに、写真やその他のものをすべてリリース パッケージにコピーできます。

environments/*
このフォルダーには、ターゲット環境ごとに用意されたファイルが含まれており、アプリケーションで使用されるいくつかの構成変数をエクスポートします。 これらのファイルは、アプリケーションのビルド時に置き換えられます。 たとえば、運用環境では異なる API エンドポイント アドレスを使用したり、異なる統計トークン パラメーターを使用したりできます。 いくつかの模擬サービスを使用することもできます。 CLI では、これらすべてが考慮されます。

favicon.ico
どの Web サイトも、ブックマーク バーでの見た目が良くなることを望んでいます。 ご自身のアイコンに置き換えてください。

index.html
これは、他の人があなたの Web サイトにアクセスしたときに表示されるメイン ページの HTML ファイルです。 ほとんどの場合、編集する必要はありません。 CLI はアプリの構築時にすべての js および css ファイルを自動的に追加するため、ここで <script> タグや <link> タグを手動で追加する必要はありません。 </script>

main.ts
これはアプリケーションのメインエントリポイントです。 JIT コンパイラーを使用してこのアプリケーションをコンパイルし、アプリケーションのルート モジュール AppModule を起動してブラウザーで実行します。 コードを変更せずに AOT コンパイラを使用することもできます。 --aot パラメータを ng build または ngserve に渡すだけです。

polyfills.ts
ブラウザーが異なれば、Web 標準のサポートレベルも異なります。 ポリフィルは、これらの違いを標準化するのに役立ちます。 通常は core-js とzone.js を使用するだけで十分ですが、詳細についてはブラウザのサポート ガイドを確認することもできます。

styles.css
ここにグローバル スタイルがあります。 ほとんどの場合、メンテナンスを容易にするためにコンポーネントでローカル スタイルを使用することができますが、アプリケーション全体に影響を与えるスタイルをここに一元的に保存する必要があります。

test.ts
これは単体テストの主要なエントリ ポイントです。 馴染みのないカスタム構成がいくつかありますが、ここでは何も編集する必要はありません。

tsconfig.{app|spec}.json
TypeScript コンパイラーの構成ファイル。 tsconfig.app.json は Angular アプリケーション用に用意されており、tsconfig.spec.json は単体テスト用に用意されています。

7.2 ルートディレクトリ

src/ フォルダーは、プロジェクトのルート フォルダーの 1 つです。 他のファイルは、アプリケーションの構築、テスト、保守、文書化、リリースを支援するために使用されます。これらは、src/ と同じレベルのルート ディレクトリに配置されます。

e2e/
e2e/ では、エンドツーエンドのテストです。 エンドツーエンドのテストは実際にはアプリケーションから独立しているため、src/ の下にはありません。これはアプリケーションのテストにのみ適しています。 そのため、独自の tsconfig.json が存在します。

node_modules/
Node.js はこのフォルダーを作成し、package.json にリストされているすべてのサードパーティ モジュールをそのフォルダーに配置します。

.angular-cli.json
Angular CLI の設定ファイル。 このファイルでは、一連のデフォルト値を設定し、プロジェクトのコンパイル時にどのファイルを含めるかを構成できます。 詳細については、公式ドキュメントを参照してください。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS 開発マニュアル にアクセスして学習してください)

.editorconfig
は、エディターの単純な構成ファイルであり、プロジェクトに関わる全員が基本的な編集を行えるようにするために使用されます。サーバーの構成。 ほとんどのエディターは .editorconfig ファイルをサポートしています。詳細については、http://php.cn/course/47.html を参照してください。

.gitignore
自動生成された特定のファイルがソース コード管理システムに送信されないようにするために使用される Git 構成ファイル。

karma.conf.js
ng テストの実行時に使用される Karma の単体テストを設定します。

package.json
npm 構成ファイル。プロジェクトで使用されるサードパーティの依存関係パッケージがリストされます。 ここに独自のカスタム スクリプトを追加することもできます。

protractor.conf.js
Protractor のエンドツーエンド テスト構成ファイル。ng e2e の実行時に使用されます。

README.md
CLI コマンド情報が事前に記述されたプロジェクトの基本ドキュメント。 このリポジトリを参照する誰もがそれに応じてアプリをビルドできるように、プロジェクト ドキュメントを使用して改善することを忘れないでください。

tsconfig.json
TypeScript コンパイラ設定。IDE はそれを使用して、より良いヘルプを提供します。

tslint.json
TSLint と Codelyzer の構成情報。ng lint の実行時に使用されます。 Lint 関数は、統一されたコード スタイルを維持するのに役立ちます。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAngular 5.0 開発環境のセットアップと最初の ng5 プロジェクトの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。