Angular6目次はじめてのAngular開発環境のセットアップ新しいプロジェクトを作成するアプリケーションを作成するAngularComponentを編集するチュートリアルをやってみよう!プロジェクトファイルレビューsrcフォルダルートフォルダはじめてのAngular優れたツールを使用すると、すべてを手作業で行った場合よりも、アプリケーション開発を迅速かつ容易に行うことができます。CLIは、プロジェクトを作成したり、ファイルを追加したり、テスト、バンドル、デプロイメントなどの進行中のさまざまな開発タスクを実行できるコマンドラインインターフェイスツールです。CLIを使用してTypeScriptで簡単なAngularアプリケーションを構築して実行することです。この章の最後では、CLIを使用した開発の基礎知識と、これらのドキュメンテーションサンプルの基礎と、実際のアプリケーションの基礎について説明します。開発環境のセットアップ何かできるようになる前に開発環境をセットアップする必要があります。Node.js®とnpmがマシンにインストールされていない場合はインストールします。-vを実行して、少なくともNode.jsバージョン8.x以上およびnpmバージョン5.x以上を実行していることを確認します。古いバージョンではエラーが発生しますが、新しいバージョンで問題ありません。CLIをグローバルにインストールします。@angular/cli新しいプロジェクトを作成するターミナルウィンドウを開きます。CLIは、必要なnpmパッケージをインストールし、プロジェクトファイルを作成し、プロジェクトにシンプルなデフォルトアプリケーションを取り込みます。これには時間がかかることがあります。addコマンドを使用すると、パッケージ化された機能を新しいプロジェクトに追加できます。addコマンドは、指定されたパッケージに回路図を適用してプロジェクトを変換します。CLIのマニュアルを参照してください。Materialは、典型的なアプリケーションレイアウトのUIを提供します。Materialのドキュメントを参照してください。アプリケーションを作成するプロジェクトディレクトリに移動し、サーバーを起動します。serveコマンドはサーバーを起動し、ファイルを監視し、それらのファイルを変更するときにアプリケーションを再構築します。open(-o)オプションを使うとhttp://localhost:4200/にブラウザが自動的に開きます。vscodeがおすすめです。CLIが最初のAngularコンポーネントを作成しました。これはルートコンポーネントであり、app-rootという名前です。./src/app/app.component.tsで見つけることができます。App!’に変更します。app.component.tsスタイルも変更してみましょう。app.component.cssを開き、コンポーネントにスタイルを与えます。Heroesチュートリアルを体験する準備が整いました。Angularで構築できる素晴らしいアプリケーションを示す、チュートリアルを用意しました。新しいプロジェクトのファイルについてもう少し詳しく知ることができます。ソリューションの両方の基盤です。チェックアウトすべき最初のファイルはREADME.mdです。CLIコマンドの使用方法に関する基本的な情報があります。CLIリポジトリとWikiを必ず訪れてください。生成されたファイルの中にはあなたには馴染みのないものがあります。srcフォルダあなたのアプリはsrcフォルダにあります。すべてのAngularコンポーネント、テンプレート、スタイル、画像、およびアプリに必要なすべてのものがここに必要です。このフォルダの外にあるファイルは、アプリケーションの構築をサポートするためのものです。Purposeapp/app.component.{ts,html,css,spec.ts}AppComponentをHTMLテンプレート、CSSスタイルシート、単体テストとともに定義します。これは、アプリケーションのルートコンポーネントです。開発が進むにつれてネストされたコンポーネントのツリーの元にになる要素。アプリケーションをアセンブルする方法をAngularに伝えるルートモジュールであるAppModuleを定義します。今はAppComponentだけを宣言しています。宣言する要素が増えるでしょう。アプリケーションをビルドするときに、画像を置くことができ、その他諸々格納することができるフォルダ。このフォルダーには、各環境ごとに1つのファイルが含まれています。各ファイルは、アプリケーションで使用する簡単な構成変数をエクスポートします。ファイルは、アプリケーションをビルドするときに置き換えられます。プロダクション用のAPIエンドポイントとは別のAPIエンドポイントを使用したり、異なるアナリティクストークン用のAPIエンドポイントを使用することもできます。いくつかの模擬サービスを使用することさえあります。いずれにせよ、CLIはあなたをカバーしています。異なるフロントエンドツール間でターゲットブラウザを共有するための設定ファイル。他のユーザーがサイトにアクセスしたときに表示されるメインのHTMLページ。ほとんどの場合、編集する必要はありません。<link>などのタグを組み込む必要はありません。カルマテストランナーのユニットテスト構成。test実行時に使用されます。あなたのアプリのメインエントリーポイント。アプリケーションをJITコンパイラでコンパイルし、アプリケーションのルートモジュール(AppModule)をブートストラップしてブラウザで実行します。serveコマンドに追加することで、コードを変更せずにAOTコンパイラを使用することもできます。ブラウザの種類によって、Web標準のサポートレベルが異なります。Polyfillsはこれらの違いを正規化するのに役立ちます。core-jsとzone.jsではかなり安全ですが、詳細については、ブラウザサポートガイドを参照してください。あなたのグローバルスタイルはここに行きます。ほとんどの場合、メンテナンスを容易にするためにコンポーネントにローカルスタイルを使用したいと考えていますが、すべてのアプリに影響を与えるスタイルはここに配置する必要があります。これはあなたの単体テストのメインエントリーポイントです。あなたには馴染みのないカスタム設定がいくつかありますが、編集する必要はありません。lintを実行するときに使用されるCodelyzerとともにTSLintの追加のリンキング設定。Lintingは、コードスタイルの一貫性を維持します。/フォルダは、プロジェクトのルートフォルダ内の項目の1つにすぎません。他のファイルは、アプリケーションの構築、テスト、保守、文書化、および展開に役立ちます。/の隣のルートフォルダにあります。e2eの内部ファイルでエンドツーエンドのテストを実行します。e2eテストはあなたのメインアプリをテストするため、srcの中にあるべきではありません。そのためtsconfig.e2e.jsonも格納されています。Node.jsはこのフォルダを作成し、package.json内にリストされているサードパーティのすべてのモジュールをその内部に配置します。プロジェクトを使用する全員が同じ基本設定を持つように、エディタを簡単に設定できます。ほとんどのエディタは.editorconfigファイルをサポートしています。詳細はhttp://editorconfig.orgを参照してください。自動生成されたファイルがソース管理にコミットされていないことを確認するための設定。CLIの設定ファイルでは、いくつかのデフォルトを設定できます。プロジェクトのビルド時に含まれるファイルを設定することもできます。あなたがもっと知りたいなら、公式文書をチェックしてください。プロジェクトが使用するサードパーティのパッケージをリスト表示したnpmの設定。ここに独自のカスタムスクリプトを追加することもできます。開発者のためのエンドツーエンドのテスト構成。e2eの実行時に使用されます。CLIコマンド情報があらかじめ入力されているプロジェクトの基本ドキュメンテーション。あなたのIDEがピックアップして便利なツールを提供するためのTypeScriptコンパイラの設定。lintを実行しているときに使用されるCodelyzerと一緒にTSLintの設定をLintingします。Lintingは、コードスタイルの一貫性を維持します。チュートリアルではヒーローズカンパニーが英雄の管理するアプリを作成します。コメントをキャンセルメールアドレスが公開されることはありません。アニメーション入門!こんなことできますよ。