Angular4-project-setup
Angular 4-プロジェクトのセットアップ
AngularJSはモデルビューコントローラーに基づいていますが、Angular 2はコンポーネント構造に基づいています。 Angular 4は、Angular2と同じ構造で動作しますが、Angular2と比較すると高速です。
Angular4はTypeScript 2.2バージョンを使用しますが、Angular 2はTypeScriptバージョン1.8を使用します。 これにより、パフォーマンスに大きな違いが生じます。
Angular 4をインストールするために、Angularチームはインストールを簡単にするAngular CLIを考案しました。 Angular 4をインストールするには、いくつかのコマンドを実行する必要があります。
このサイトhttps://cli.angular.ioにアクセスして、Angular CLIをインストールします。
インストールを開始するには、まず、nodejsとnpmが最新バージョンでインストールされていることを確認する必要があります。 npmパッケージは、nodejsとともにインストールされます。
nodejsサイトhttps://nodejs.org/en/にアクセスします。
Nodejs v6.11.0の最新バージョンがユーザーに推奨されます。 4つ以上のnodejsを既に持っているユーザーは、上記のプロセスをスキップできます。 nodejsがインストールされると、以下に示すように、コマンドnode –v を使用してコマンドラインでnodeのバージョンを確認できます-
コマンドプロンプトにv6.11.0が表示されます。 nodejsがインストールされると、npmも一緒にインストールされます。
npmのバージョンを確認するには、ターミナルでコマンド npm –v を入力します。 以下に示すように、npmのバージョンが表示されます。
npmのバージョンは3.10.10です。 nodejsとnpmがインストールされたので、angular cliコマンドを実行して、Angular 4をインストールします。 あなたはウェブページに次のコマンドが表示されます-
コマンドラインの最初のコマンドから始めて、それがどのように機能するかを見てみましょう。
まず、Angular CLIコマンドを実行する空のディレクトリを作成します。
Angular CLI Installation Step1
上記のコマンドを入力して、Angular 4をインストールします。 インストールプロセスが開始され、完了するまでに数分かかります。
Angular CLI Installation Step2
インストールする上記のコマンドが完了すると、次のコマンドプロンプトが表示されます-
Angular CLI Installation Step3
空のフォルダー ProjectA4 を作成し、Angular CLIコマンドをインストールしました。 また、*-g *を使用して、Angular CLIをグローバルにインストールしました。 これで、Angular 4プロジェクトを任意のディレクトリまたはフォルダーに作成できます。AngularCLIプロジェクトはシステムにグローバルにインストールされ、任意のディレクトリから使用できるため、賢明にインストールする必要はありません。
Angular CLIがインストールされているかどうかを確認しましょう。 インストールを確認するには、ターミナルで次のコマンドを実行します-
Angular CLI Installation Step4
現在1.2.0である@ angular/cliバージョンを取得します。 実行中のノードバージョンは6.11.0で、OSの詳細も含まれています。 上記の詳細から、angular cliが正常にインストールされ、プロジェクトを開始する準備ができたことがわかります。
これでAngular 4がインストールされました。 Angular 4で最初のプロジェクトを作成しましょう。 Angular 4でプロジェクトを作成するには、次のコマンドを使用します-
プロジェクトに ng new Angular 4-app という名前を付けます。
コマンドラインで上記のコマンドを実行します。
Angular CLI Installation Step5
プロジェクト Angular 4-app が正常に作成されました。 プロジェクトがAngular 4で実行するために必要なすべての必要なパッケージをインストールします。 ディレクトリ Angular 4-app にある作成されたプロジェクトに切り替えましょう。 コマンドラインでディレクトリを変更します- cd Angular 4-app 。
Angular 4の操作にはVisual Studio Code IDEを使用します。 IDE、つまりAtom、WebStormなどを使用できます。
Visual Studio Codeをダウンロードするには、https://code.visualstudio.com/にアクセスし、* Windows用にダウンロード*をクリックします。
IDEをインストールするために* Windows用にダウンロード*をクリックし、セットアップを実行してIDEの使用を開始します。
エディタは次のように見えます-
まだプロジェクトを開始していません。 次に、angle-cliを使用して作成したプロジェクトを取り上げます。
プロジェクトのファイル構造ができたので、次のコマンドでプロジェクトをコンパイルしましょう-
ng serve Command Starts Server
Webサーバーはポート4200で起動します。 ブラウザーにURL http://localhost:4200/ を入力して、出力を確認します。 プロジェクトがコンパイルされると、次の出力が表示されます-
ブラウザで http://localhost:4200/ を実行すると、次の画面が表示されます-
私たちは今、次のコンテンツを表示するためにいくつかの変更を加えましょう-
「Angular 4プロジェクトへようこそ」
プロジェクトのセットアップを完了しましょう。 ご覧のように、ポート4200を使用しています。これは、コンパイル中にangle-cliが使用するデフォルトのポートです。 次のコマンドを使用して、必要に応じてポートを変更できます-
Angular 4アプリフォルダーには、次の*フォルダー構造*があります-
- e2e -エンドツーエンドのテストフォルダー。 主にe2eは統合テストに使用され、アプリケーションが正常に動作することを保証します。
- node_modules -インストールされているnpmパッケージはnode_modulesです。 フォルダを開いて、利用可能なパッケージを確認できます。
- src -このフォルダーは、Angular 4を使用してプロジェクトで作業する場所です。
Angular 4アプリフォルダーには、次の*ファイル構造*があります-
- .angular-cli.json -基本的にプロジェクト名、cliのバージョンなどを保持します。
- .editorconfig -これはエディターの構成ファイルです。
- .gitignore -リポジトリを複製する他のユーザーと無視ルールを共有するには、リポジトリに.gitignoreファイルをコミットする必要があります。
- karma.conf.js -これは、分度器を介した単体テストに使用されます。 プロジェクトに必要なすべての情報は、karma.conf.jsファイルで提供されます。
- package.json -package.jsonファイルは、npm installを実行したときにnode_modulesにインストールされるライブラリを示します。
現在、エディターでファイルを開くと、次のモジュールが追加されます。
ライブラリをさらに追加する必要がある場合は、それらをここに追加してnpm installコマンドを実行できます。
- protractor.conf.js -これは、アプリケーションに必要なテスト構成です。
- tsconfig.json -これには基本的に、コンパイル時に必要なコンパイラオプションが含まれています。
- tslint.json -これは、コンパイル中に考慮されるルールを含む構成ファイルです。
- srcフォルダー*はメインフォルダーで、*内部的には異なるファイル構造*を持っています。
app
以下に説明するファイルが含まれています。 これらのファイルは、デフォルトでangle-cliによってインストールされます。
- app.module.ts -ファイルを開くと、コードがインポートされた異なるライブラリへの参照を持っていることがわかります。 Angular-cliは、インポートにこれらのデフォルトライブラリ(angular/core、platform-browser)を使用しています。 名前自体は、ライブラリの使用法を説明しています。
それらはインポートされ、宣言、インポート、プロバイダー、*ブートストラップ*などの変数に保存されます。
宣言-宣言では、コンポーネントへの参照が保存されます。 Appcomponentは、新しいプロジェクトが開始されるたびに作成されるデフォルトのコンポーネントです。 別のセクションで新しいコンポーネントの作成について学習します。
- app.component.css -あなたはここでCSS構造を書くことができます。 以下に示すように、今、divに背景色を追加しました。
- app.componentl -HTMLコードはこのファイルで使用できます。
これは、プロジェクト作成で現在利用可能なデフォルトのHTMLコードです。
- app.component.spec.ts -これらは、ソースコンポーネントの単体テストを含む自動生成されたファイルです。
- app.component.ts -コンポーネントのクラスはここで定義されています。 .tsファイル内のhtml構造の処理を行うことができます。 処理には、データベースへの接続、他のコンポーネントとの対話、ルーティング、サービスなどのアクティビティが含まれます。
ファイルの構造は次のとおりです-
資産
このフォルダーに画像、jsファイルを保存できます。
環境
このフォルダーには、実稼働環境または開発環境の詳細が含まれています。 フォルダーには2つのファイルが含まれています。
- environment.prod.ts
- environment.ts
両方のファイルには、最終ファイルを実稼働環境でコンパイルするか、開発環境でコンパイルするかについての詳細が含まれています。
Angular 4アプリフォルダーの追加のファイル構造には、次のものが含まれます-
favicon.ico
これは通常、Webサイトのルートディレクトリにあるファイルです。
インデックス
これはブラウザに表示されるファイルです。
本体には <app-root> </app-root> があります。 これは app.component.ts ファイルで使用されるセレクターであり、app.componentlファイルの詳細を表示します。
main.ts
main.tsは、プロジェクト開発を開始するファイルです。 まず、必要な基本モジュールをインポートします。 現在、angular/core、angular/platform-browser-dynamicが表示されている場合、angular-cliのインストールおよびプロジェクトのセットアップ中にapp.moduleおよび環境がデフォルトでインポートされます。
- platformBrowserDynamic()。bootstrapModule(AppModule)には、親モジュール参照 *AppModule があります。 したがって、ブラウザで実行すると、呼び出されるファイルはindexlになります。 Indexlは、次のコードの実行時に親モジュール、つまりAppModuleを呼び出すmain.tsを内部的に参照します-
AppModuleが呼び出されると、app.module.tsが呼び出され、さらに次のようにboostrapに基づいてAppComponentが呼び出されます-
app.component.tsには、indexlファイルで使用される selector:app-root があります。 これにより、app.componentlに存在するコンテンツが表示されます。
次は、ブラウザに表示されます-
polyfill.ts
これは主に下位互換性のために使用されます。
styles.css
これは、プロジェクトに必要なスタイルファイルです。
test.ts
ここでは、プロジェクトをテストするためのユニットテストケースが処理されます。
tsconfig.app.json
これはコンパイル中に使用され、アプリケーションを実行するために使用する必要がある設定の詳細が含まれています。
tsconfig.spec.json
これにより、テストの詳細を維持できます。
typings.d.ts
TypeScript定義を管理するために使用されます。
最終的なファイル構造は次のようになります-