Angular4-project-setup

提供：Dev Guides
移動先:案内、検索

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をインストールします。

Angular CLI

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

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

NodeJのダウンロード

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

コマンドプロンプトショーv6.11.0

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

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

npm-v-3.10.10

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

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

ng new Angular 4-app//name of the project

cd my-dream-app

ng serve

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

まず、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がインストールされているかどうかを確認しましょう。 インストールを確認するには、ターミナルで次のコマンドを実行します- 

ng -v

Angular CLI Installation Step4

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

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

ng new projectname

プロジェクトに 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用にダウンロード*をクリックします。

Visual Studio Code

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

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

Angular CLI Editor

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

Angular 4-app Project 

*Angular 4-app* プロジェクトを検討します。 Angular 4-appを開いて、フォルダー構造がどのように見えるかを見てみましょう。

フォルダー構造

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

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

ng serve Command

ng serve Command Starts Server

Webサーバーはポート4200で起動します。 ブラウザーにURL http：//localhost：4200/ を入力して、出力を確認します。 プロジェクトがコンパイルされると、次の出力が表示されます-

サーバーはポート4200で起動します

ブラウザで http：//localhost：4200/ を実行すると、次の画面が表示されます-

Angular App

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

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

Angular 4プロジェクト 

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

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

ng serve --host 0.0.0.0 –port 4205

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にインストールされるライブラリを示します。

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

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

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

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

app

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

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

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

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-b​​rowserからインポートされるインポートの一部です。
*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
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+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-b​​rowser-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定義を管理するために使用されます。

最終的なファイル構造は次のようになります-

最終的なファイル構造

「https://www.finddevguides.com/index.php?title=Angular4-project-setup&oldid=29533」から取得
Powered by MediaWiki