Angular 6-プロジェクトのセットアップ

AngularJSはモデルビューコントローラーに基づいていますが、Angular 4はコンポーネント構造に基づいています。 Angular 6は、Angular4と同じ構造で動作しますが、Angular4と比較すると高速です。

Angular6はTypeScript 2.9バージョンを使用しますが、Angular 4はTypeScriptバージョン2.2を使用します。これにより、パフォーマンスに大きな違いが生じます。

Angular 6をインストールするために、Angularチームはインストールを簡単にするAngular CLIを考案しました。 Angular 6をインストールするには、いくつかのコマンドを実行する必要があります。

このサイトhttps://cli.angular.ioにアクセスして、Angular CLIをインストールします。

インストールを開始するには、まず、nodejsとnpmが最新バージョンでインストールされていることを確認する必要があります。 npmパッケージは、nodejsとともにインストールされます。

nodejsサイトhttps://nodejs.org/en/にアクセスします。

Nodejs v8.11.3の最新バージョンがユーザーに推奨されます。すでに8.11を超えるnodejsを持っているユーザーは、上記のプロセスをスキップできます。 nodejsがインストールされると、以下に示すように、コマンドnode -v を使用してコマンドラインでノードのバージョンを確認できます

node -v
v8.11.3

コマンドプロンプトにv8.11.3と表示されます。 nodejsがインストールされると、npmも一緒にインストールされます。

npmのバージョンを確認するには、ターミナルでコマンド npm -v を入力します。以下に示すように、npmのバージョンが表示されます。

npm -v
v5.6.0

npmのバージョンは5.6.0です。 nodejsとnpmがインストールされたので、angular cliコマンドを実行して、Angular 6をインストールします。あなたはウェブページに次のコマンドが表示されます-

npm install -g @angular/cli//command to install angular 6
ng new Angular 6-app//name of the project
cd my-dream-app
ng serve

コマンドラインの最初のコマンドから始めて、それがどのように機能するかを見てみましょう。

まず、Angular CLIコマンドを実行する空のディレクトリを作成します。

npm install -g @angular/cli//command to install angular 6

空のフォルダー ProjectA4 を作成し、Angular CLIコマンドをインストールしました。また、*-g *を使用して、Angular CLIをグローバルにインストールしました。これで、Angular 4プロジェクトを任意のディレクトリまたはフォルダーに作成できます。AngularCLIプロジェクトはシステムにグローバルにインストールされ、任意のディレクトリから使用できるため、賢明にインストールする必要はありません。

Angular CLIがインストールされているかどうかを確認しましょう。インストールを確認するには、ターミナルで次のコマンドを実行します-

ng -v
     _                      _                 ____ _     ___
   /\   _ __   __ _ _   _| | __ _ _ __    /___| |   |_ _|
  /? \ | '_ \/_` | | | | |/_` | '__|   | |   | |    | |
 /___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/  \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

現在6.1.3である@ angular/cliバージョンを取得します。実行中のノードバージョンは8.11.3であり、OSの詳細も含まれています。上記の詳細から、angular cliが正常にインストールされ、プロジェクトを開始する準備ができたことがわかります。

これでAngular 6がインストールされました。 Angular 6で最初のプロジェクトを作成しましょう。 Angular 6でプロジェクトを作成するには、次のコマンドを使用します-

ng new projectname

プロジェクトに ng new Angular6App という名前を付けます。

コマンドラインで上記のコマンドを実行します。

ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tslint.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/indexl (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserslist (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tslint.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.componentl (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)

プロジェクト Angular6App が正常に作成されました。プロジェクトがAngular 6で実行するために必要なすべての必要なパッケージをインストールします。ここで、作成されたプロジェクトに切り替えましょう。このプロジェクトは、ディレクトリ Angular6App にあります。コマンドラインでディレクトリを変更します- cd Angular 6-app 。

Angular 6の操作にはVisual Studio Code IDEを使用します。 IDE、つまりAtom、WebStormなどを使用できます。

Visual Studio Codeをダウンロードするには、https://code.visualstudio.com/にアクセスし、* Windows用にダウンロード*をクリックします。

Visual Studio Code

IDEをインストールするために* Windows用にダウンロード*をクリックし、セットアップを実行してIDEの使用を開始します。

エディタは次のように見えます-

Angular CLI Editor

まだプロジェクトを開始していません。次に、angle-cliを使用して作成したプロジェクトを取り上げます。

Angular6Appプロジェクト

プロジェクトのファイル構造ができたので、次のコマンドでプロジェクトをコンパイルしましょう-

ng serve

*ng serve* コマンドは、アプリケーションをビルドし、Webサーバーを起動します。

* *Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/* *
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

Webサーバーはポート4200で起動します。ブラウザーにURL http：//localhost：4200/ を入力して、出力を確認します。次の画面に移動します-

Angular App

私たちは今、次のコンテンツを表示するためにいくつかの変更を加えましょう-

「Angular 6プロジェクトへようこそ」

Angular 6プロジェクト

*app.componentl* および *app.component.ts* ファイルに変更を加えました。 これについては、以降の章で詳しく説明します。

プロジェクトのセットアップを完了しましょう。ご覧の場合、ポート4200を使用しています。これは、コンパイル中にangle-cliが使用するデフォルトのポートです。次のコマンドを使用して、必要に応じてポートを変更できます-

ng serve --host 0.0.0.0 -port 4205

Angular 6アプリフォルダーには、次の*フォルダー構造*があります-

e2e -エンドツーエンドのテストフォルダー。主にe2eは統合テストに使用され、アプリケーションが正常に動作することを保証します。
node_modules -インストールされているnpmパッケージはnode_modulesです。フォルダを開いて、利用可能なパッケージを確認できます。
src -このフォルダーは、Angular 4を使用してプロジェクトで作業する場所です。

Angular 6アプリフォルダーには、次の*ファイル構造*があります-

.angular-cli.json -基本的にプロジェクト名、cliのバージョンなどを保持します。
.editorconfig -これはエディターの構成ファイルです。
.gitignore -リポジトリを複製する他のユーザーと無視ルールを共有するには、リポジトリに.gitignoreファイルをコミットする必要があります。
karma.conf.js -これは、分度器を介した単体テストに使用されます。プロジェクトに必要なすべての情報は、karma.conf.jsファイルで提供されます。
package.json -package.jsonファイルは、npm installを実行したときにnode_modulesにインストールされるライブラリを示します。

現在、エディターでファイルを開くと、次のモジュールが追加されます。

"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

ライブラリをさらに追加する必要がある場合は、それらをここに追加してnpm installコマンドを実行できます。

protractor.conf.js -これは、アプリケーションに必要なテスト構成です。
tsconfig.json -これには基本的に、コンパイル時に必要なコンパイラオプションが含まれています。
tslint.json -これは、コンパイル中に考慮されるルールを含む構成ファイルです。
srcフォルダー*はメインフォルダーで、*内部的には異なるファイル構造*を持っています。

app

以下に説明するファイルが含まれています。これらのファイルは、デフォルトでangle-cliによってインストールされます。

app.module.ts -ファイルを開くと、コードがインポートされた異なるライブラリへの参照を持っていることがわかります。 Angular-cliは、インポートにこれらのデフォルトライブラリ（angular/core、platform-browser）を使用しました。名前自体は、ライブラリの使用法を説明しています。

それらはインポートされ、宣言、インポート、プロバイダー、*ブートストラップ*などの変数に保存されます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

宣言-宣言では、コンポーネントへの参照が保存されます。 Appcomponentは、新しいプロジェクトが開始されるたびに作成されるデフォルトのコンポーネントです。別のセクションで新しいコンポーネントの作成について学習します。

*imports* -これにより、上記のようにモジュールがインポートされます。 現在、BrowserModuleは@ angular/platform-browserからインポートされるインポートの一部です。

*providers* -これには、作成されたサービスへの参照が含まれます。 サービスについては、後続の章で説明します。

*bootstrap* -これには、作成されたデフォルトコンポーネント、つまりAppComponentへの参照が含まれます。

app.component.css -あなたはここでCSS構造を書くことができます。以下に示すように、今、divに背景色を追加しました。

.divdetails{
   background-color: #ccc;
}

app.componentl -HTMLコードはこのファイルで使用できます。

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src =    "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
         ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
         YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
         uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
         TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
         Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
         4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
         mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
         zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
         EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
         GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
         W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
         gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
         AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
         DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
         MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
         sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
         ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
         UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
         DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

これは、プロジェクト作成で現在利用可能なデフォルトのHTMLコードです。

app.component.spec.ts -これらは、ソースコンポーネントの単体テストを含む自動生成されたファイルです。
app.component.ts -コンポーネントのクラスはここで定義されています。 .tsファイル内のhtml構造の処理を行うことができます。処理には、データベースへの接続、他のコンポーネントとの対話、ルーティング、サービスなどのアクティビティが含まれます。

ファイルの構造は次のとおりです-

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
}

資産

このフォルダーに画像、jsファイルを保存できます。

環境

このフォルダーには、実稼働環境または開発環境の詳細が含まれています。フォルダーには2つのファイルが含まれています。

environment.prod.ts
environment.ts

両方のファイルには、最終ファイルを実稼働環境でコンパイルするか、開発環境でコンパイルするかについての詳細が含まれています。

Angular 4アプリフォルダーの追加のファイル構造には、次のものが含まれます-

favicon.ico

これは通常、Webサイトのルートディレクトリにあるファイルです。

インデックス

これはブラウザに表示されるファイルです。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

本体には <app-root> </app-root> があります。これは app.component.ts ファイルで使用されるセレクターであり、app.componentlファイルの詳細を表示します。

main.ts

main.tsは、プロジェクト開発を開始するファイルです。まず、必要な基本モジュールをインポートします。現在、angular/core、angular/platform-browser-dynamicが表示されている場合、angular-cliのインストールおよびプロジェクトのセットアップ中にapp.moduleおよび環境がデフォルトでインポートされます。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

platformBrowserDynamic（）。bootstrapModule（AppModule）には、親モジュール参照 *AppModule があります。したがって、ブラウザで実行すると、呼び出されるファイルはindexlになります。 Indexlは、次のコードの実行時に親モジュール、つまりAppModuleを呼び出すmain.tsを内部的に参照します-

platformBrowserDynamic().bootstrapModule(AppModule);

AppModuleが呼び出されると、app.module.tsが呼び出され、さらに次のようにboostrapに基づいてAppComponentが呼び出されます-

bootstrap: [AppComponent]

app.component.tsには、indexlファイルで使用される selector：app-root があります。これにより、app.componentlに存在するコンテンツが表示されます。

次は、ブラウザに表示されます-

App Module

polyfill.ts

これは主に下位互換性のために使用されます。

styles.css

これは、プロジェクトに必要なスタイルファイルです。

test.ts

ここでは、プロジェクトをテストするためのユニットテストケースが処理されます。

tsconfig.app.json

これはコンパイル中に使用され、アプリケーションを実行するために使用する必要がある設定の詳細が含まれています。

tsconfig.spec.json

これにより、テストの詳細を維持できます。

typings.d.ts

TypeScript定義を管理するために使用されます。

Angular6-project-setup