Angular7-project-setup

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

Angular7-プロジェクトのセットアップ

この章では、Angular 7のプロジェクト設定について説明します。

プロジェクトのセットアップを開始するには、nodejsがインストールされていることを確認してください。 *以下に示すように、コマンド、ノード–v *を使用して、コマンドラインでノードのバージョンを確認できます-

ノード

バージョンを取得できない場合は、公式サイト（https://nodejs.org/en/）からnodejsをインストールします。

バージョン

nodejsをインストールすると、npmも一緒にインストールされます。 npmのバージョンを確認するには、次のようにコマンドラインでnpm -vを実行します-

Npmバージョン

したがって、ノードバージョン10とnpmバージョン6.4.1があります。

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

Angular CLIのインストール

あなたはウェブページに次のコマンドが表示されます- 

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

上記のコマンドは、Angular 7でプロジェクトをセットアップするのに役立ちます。

以下に示すように、 projectA7 というフォルダーを作成し、 angular/cli をインストールします-

プロジェクトA7

インストールが完了したら、以下に示すようにコマンドng versionを使用して、インストールされたパッケージの詳細を確認します-

Command Ng Version

Angular CLIのバージョン、typescriptバージョン、Angular 7で利用可能なその他のパッケージを提供します。

Angular 7のインストールは完了しました。プロジェクトのセットアップから始めましょう。

Angular 7でプロジェクトを作成するには、次のコマンドを使用します- 

ng new projectname

選択した_projectname_を使用できます。 コマンドラインで上記のコマンドを実行します。

ここでは、_projectnameをangular7-app_として使用します。 コマンドを実行すると、以下に示すようにルーティングについて尋ねられます-

Angular7アプリルーティング

yを入力して、ルーティングをプロジェクトのセットアップに追加します。

次の質問はスタイルシートについてです-

StyleSheet

利用可能なオプションは、CSS、Sass、Less、およびStylusです。 上記のスクリーンショットでは、矢印はCSS上にあります。 変更するには、矢印キーを使用して、プロジェクトのセットアップに必要なキーを選択します。 現時点では、プロジェクトのセットアップのためのCSSについて説明します。

CSS

プロジェクト_angular7-app_が正常に作成されました。 プロジェクトがAngular7で実行するために必要なすべての必要なパッケージをインストールします。 ここで、作成されたプロジェクト（ angular7-app ディレクトリ内）に切り替えましょう。

コードの指定された行を使用して、コマンドラインでディレクトリを変更します- 

cd angular7-app

Angular 7での作業にはVisual Studio Code IDEを使用します。Atom、WebStormなど、あらゆるIDEを使用できます。

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

コードIDE

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

以下はエディタです-

Visual Studio

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

プロジェクト 

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

Angular7アプリ

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

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

Angular7 Ng Serve

コマンドが実行を開始すると、以下が表示されます-

Ng Serve

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

Ng Serve2

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

ようこそ

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

「Angular 7へようこそ！」

Welcome Angular7

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

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

ng serve --host 0.0.0.0 –port 4205

angular7-app/フォルダーには、次のフォルダー構造-があります

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

angular7-app/フォルダーには、次の*ファイル構造*があります-

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

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

"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"

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

  • tsconfig.json -これには基本的に、コンパイル時に必要なコンパイラオプションが含まれています。

  • tslint.json -これは、コンパイル中に考慮されるルールを含む構成ファイルです。

    *src/* フォルダーはメインフォルダーで、内部では異なるファイル構造を持っています。

app

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

app.module.ts

ファイルを開くと、コードがインポートされたさまざまなライブラリへの参照を持っていることがわかります。 Angular-cliは、インポートにこれらのデフォルトライブラリを使用しました：angle/core、platform-b​​rowser。

名前自体は、ライブラリの使用法を説明しています。 それらはインポートされ、宣言、インポート、プロバイダー、ブートストラップなどの変数に保存されます。 

*app-routing.module* も追加されていることがわかります。 これは、インストールの開始時にルーティングを選択したためです。 モジュールは@ angular/cliによって追加されます。

以下は、ファイルの構造です- 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

@NgModuleは@ angular/coreからインポートされ、次のプロパティを持つオブジェクトがあります-

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

インポート-これにより、上記のようにモジュールがインポートされます。 現在、BrowserModuleは@ angular/platform-b​​rowserからインポートされるインポートの一部です。 AppRoutingModuleが追加されたルーティングモジュールもあります。

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

*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 style = "text-align:center">
   <h1>Welcome to {{ title }}!</h1>
   <img width = "300" alt = "Angular Logo"
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7>
</div>

<h2>Here are some links to help you start:</h2>
<ul>
   <li>
      <h2><a target = "_blank" rel = "noopener"
         href = "https://angular.io/tutorial">Tour of Heroes</a>
      </h2>
   </li>
   <li>
      <h2><a target = "_blank" rel = "noopener"
         href = https://angular.io/cli">CLI Documentation</>
      </h2>
   </li>
   <li>
      <h2><a target = "_blank" rel = "noopener"
         href = "https://blog.angular.io/">Angular blog</a>
      </h2>
   </li>
</ul>
<router-outlet></router-outlet>

これは、プロジェクト作成で現在利用可能なデフォルトの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 = 'Angular 7';
}

app-routing.module.ts

このファイルは、プロジェクトに必要なルーティングを処理します。 メインモジュール、つまりapp.module.tsに接続されています。

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

資産

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

環境

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

  • environment.prod.ts
  • environment.ts

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

_angular7-app/_フォルダーの追加のファイル構造には、次のものが含まれます-

favicon.ico

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

インデックス

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

<html lang = "en">
   <head>
      <meta charset = "utf-8"7gt;
      <title>Angular7App</title>
      <base href = "/">
      <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).catch(err => console.error(err));

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

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModuleが呼び出されると、app.module.tsが呼び出され、さらにブートストラップに基づいてAppComponentが呼び出されます。 

bootstrap: [AppComponent]
*app.component.ts* には、indexlファイルで使用される *app-root* セレクターがあります。 *app.componentl* にあるコンテンツが表示されます。

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

リンク

polyfill.ts

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

styles.css

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

test.ts

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

tsconfig.app.json

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

tsconfig.spec.json

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

typings.d.ts

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

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

Typescript

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