[Angular6] QuickStartをサクッと雰囲気翻訳したよ!

はじめてのAngular

優れたツールを使用すると、すべてを手作業で行った場合よりも、アプリケーション開発を迅速かつ容易に行うことができます。

Angular CLIは、プロジェクトを作成したり、ファイルを追加したり、テスト、バンドル、デプロイメントなどの進行中のさまざまな開発タスクを実行できるコマンドラインインターフェイスツールです。

このガイドの目的は、すべてのAngularプロジェクトに役立つスタイルガイドの推奨事項を遵守しながら、Angular CLIを使用してTypeScriptで簡単なAngularアプリケーションを構築して実行することです。

この章の最後では、CLIを使用した開発の基礎知識と、これらのドキュメンテーションサンプルの基礎と、実際のアプリケーションの基礎について説明します。

開発環境のセットアップ

何かできるようになる前に開発環境をセットアップする必要があります。

Node.js®とnpmがマシンにインストールされていない場合はインストールします。

ターミナル/コンソールウィンドウでnode -vおよびnpm -vを実行して、少なくともNode.jsバージョン8.x以上およびnpmバージョン5.x以上を実行していることを確認します。古いバージョンではエラーが発生しますが、新しいバージョンで問題ありません。

Angular CLIをグローバルにインストールします。

npm install -g @angular/cli

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

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

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

ng new my-app

Angular CLIは、必要なnpmパッケージをインストールし、プロジェクトファイルを作成し、プロジェクトにシンプルなデフォルトアプリケーションを取り込みます。これには時間がかかることがあります。

ng addコマンドを使用すると、パッケージ化された機能を新しいプロジェクトに追加できます。 ng addコマンドは、指定されたパッケージに回路図を適用してプロジェクトを変換します。詳細については、Angular CLIのマニュアルを参照してください。

Angular Materialは、典型的なアプリケーションレイアウトのUIを提供します。詳細については、Angular Materialのドキュメントを参照してください。

アプリケーションを作成する

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

cd my-app
ng serve --open

ng serveコマンドはサーバーを起動し、ファイルを監視し、それらのファイルを変更するときにアプリケーションを再構築します。

open-o)オプションを使うとhttp://localhost:4200/にブラウザが自動的に開きます。

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

AngularComponentを編集する

Angularの開発には vscodeがおすすめです。

CLIが最初のAngularコンポーネントを作成しました。これはルートコンポーネントであり、app-rootという名前です。 ./src/app/app.component.tsで見つけることができます。

コンポーネントファイルを開き、titleプロパティを ‘app’から ‘My First Angular App!’に変更します。

app.component.ts

スタイルも変更してみましょう。

src / app / app.component.cssを開き、コンポーネントにスタイルを与えます。

src/app/app.component.css


Looking good!

チュートリアルをやってみよう!

あなたはTour of Heroesチュートリアルを体験する準備が整いました。Angularで構築できる素晴らしいアプリケーションを示す、チュートリアルを用意しました。

または、新しいプロジェクトのファイルについてもう少し詳しく知ることができます。

プロジェクトファイルレビュー

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

チェックアウトすべき最初のファイルはREADME.mdです。 CLIコマンドの使用方法に関する基本的な情報があります。 Angular CLIがどのように機能するかについてもっと知りたいときは、Angular CLIリポジトリWikiを必ず訪れてください。

生成されたファイルの中にはあなたには馴染みのないものがあります。

srcフォルダ

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

File Purpose
app/app.component.

{ts,html,css,spec.ts}

AppComponentをHTMLテンプレート、CSSスタイルシート、単体テストとともに定義します。これは、アプリケーションのルートコンポーネントです。開発が進むにつれてネストされたコンポーネントのツリーの元にになる要素。
app/app.module.ts アプリケーションをアセンブルする方法をAngularに伝えるルートモジュールであるAppModuleを定義します。今はAppComponentだけを宣言しています。すぐに、宣言する要素が増えるでしょう。
assets/* アプリケーションをビルドするときに、画像を置くことができ、その他諸々格納することができるフォルダ。
environments/* このフォルダーには、各環境ごとに1つのファイルが含まれています。各ファイルは、アプリケーションで使用する簡単な構成変数をエクスポートします。ファイルは、アプリケーションをビルドするときに置き換えられます。プロダクション用のAPIエンドポイントとは別のAPIエンドポイントを使用したり、異なるアナリティクストークン用のAPIエンドポイントを使用することもできます。いくつかの模擬サービスを使用することさえあります。いずれにせよ、CLIはあなたをカバーしています。
browserslist 異なるフロントエンドツール間でターゲットブラウザを共有するための設定ファイル。
favicon.ico ファビコン
index.html 他のユーザーがサイトにアクセスしたときに表示されるメインのHTMLページ。ほとんどの場合、編集する必要はありません。 CLIは、アプリケーションを構築するときにすべてのjsファイルとcssファイルを自動的に追加するので、手動で<script> や<link>などのタグを組み込む必要はありません。
karma.conf.js カルマテストランナーのユニットテスト構成。ng test実行時に使用されます。
main.ts あなたのアプリのメインエントリーポイント。アプリケーションをJITコンパイラでコンパイルし、アプリケーションのルートモジュール(AppModule)をブートストラップしてブラウザで実行します。また、--aotフラグをng buildおよびng serveコマンドに追加することで、コードを変更せずにAOTコンパイラを使用することもできます。
polyfills.ts ブラウザの種類によって、Web標準のサポートレベルが異なります。 Polyfillsはこれらの違いを正規化するのに役立ちます。 core-jsとzone.jsではかなり安全ですが、詳細については、ブラウザサポートガイドを参照してください。
 styles.css あなたのグローバルスタイルはここに行きます。ほとんどの場合、メンテナンスを容易にするためにコンポーネントにローカルスタイルを使用したいと考えていますが、すべてのアプリに影響を与えるスタイルはここに配置する必要があります。
 test.ts これはあなたの単体テストのメインエントリーポイントです。あなたには馴染みのないカスタム設定がいくつかありますが、編集する必要はありません。
 tsconfig.{app|spec}.json Angularアプリケーション(tsconfig.app.json)と単体テスト(tsconfig.spec.json)のTypeScriptコンパイラ構成
 tslint.json  ng lintを実行するときに使用されるCodelyzerとともにTSLintの追加のリンキング設定。 Lintingは、コードスタイルの一貫性を維持します。

ルートフォルダ

src /フォルダは、プロジェクトのルートフォルダ内の項目の1つにすぎません。他のファイルは、アプリケーションの構築、テスト、保守、文書化、および展開に役立ちます。これらのファイルは、src /の隣のルートフォルダにあります。

File Purpose
e2e/ e2eの内部ファイルでエンドツーエンドのテストを実行します。 e2eテストはあなたのメインアプリをテストするため、srcの中にあるべきではありません。そのためtsconfig.e2e.jsonも格納されています。
node_modules/ Node.jsはこのフォルダを作成し、package.json内にリストされているサードパーティのすべてのモジュールをその内部に配置します。
.editorconfig プロジェクトを使用する全員が同じ基本設定を持つように、エディタを簡単に設定できます。ほとんどのエディタは.editorconfigファイルをサポートしています。詳細はhttp://editorconfig.orgを参照してください。
.gitignore 自動生成されたファイルがソース管理にコミットされていないことを確認するための設定。
angular.json このAngular CLIの設定ファイルでは、いくつかのデフォルトを設定できます。また、プロジェクトのビルド時に含まれるファイルを設定することもできます。あなたがもっと知りたいなら、公式文書をチェックしてください。
package.json プロジェクトが使用するサードパーティのパッケージをリスト表示したnpmの設定。ここに独自のカスタムスクリプトを追加することもできます。
protractor.conf.js 開発者のためのエンドツーエンドのテスト構成。ng e2eの実行時に使用されます。
README.md CLIコマンド情報があらかじめ入力されているプロジェクトの基本ドキュメンテーション。レポをチェックアウトするすべての人があなたのアプリを構築できるように、プロジェクトのドキュメントを使ってそれを強化してください!
tsconfig.json あなたのIDEがピックアップして便利なツールを提供するためのTypeScriptコンパイラの設定。
tslint.json ng lintを実行しているときに使用されるCodelyzerと一緒にTSLintの設定をLintingします。 Lintingは、コードスタイルの一貫性を維持します。

次のステップ

Angularが初めての方はチュートリアルをやってみましょう!