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

この章では、Angular7でのプロジェクトのセットアップについて説明します。

プロジェクトのセットアップを開始するには、nodejsがインストールされていることを確認してください。 You can check the version of node in the command line using the command, node –v、以下に示すように-

バージョンを取得できない場合は、公式サイトからnodejsをインストールしてください-https://nodejs.org/en/.

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

つまり、ノードバージョン10とnpmバージョン6.4.1があります。

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

Webページに次のコマンドが表示されます-

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

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

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

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

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

Angular 7のインストールが完了しました。次に、プロジェクトのセットアップから始めます。

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

ng new projectname

選択したプロジェクト名を使用できます。上記のコマンドをコマンドラインで実行してみましょう。

ここでは、プロジェクト名をangular7-appとして使用します。コマンドを実行すると、以下に示すようにルーティングについて尋ねられます-

yと入力して、プロジェクト設定にルーティングを追加します。

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

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

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

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

cd angular7-app

Angular7の操作にはVisualStudio Code IDEを使用します。Atom、WebStormなどの任意のIDEを使用できます。

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

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

以下はエディターです-

その中でプロジェクトを開始していません。ここで、angular-cliを使用して作成したプロジェクトを取り上げましょう。

検討します angular7-app事業。開いてみましょうangular7-app フォルダ構造がどのように見えるかを確認してください。

プロジェクトのファイル構造ができたので、次のコマンドを使用してプロジェクトをコンパイルします。

ng serve

The ng serve command builds the application and starts the web server.

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

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

URLを実行したら、 http://localhost:4200/ ブラウザでは、次の画面に移動します-

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

“Welcome to Angular 7!”

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

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

ng serve --host 0.0.0.0 –port 4205

angle7-app /フォルダーには次のものがあります folder structure−

  • e2e/−エンドツーエンドのテストフォルダ。主にe2eは統合テストに使用され、アプリケーションが正常に動作することを確認するのに役立ちます。

  • node_modules/−インストールされているnpmパッケージはnode_modulesです。フォルダを開いて、利用可能なパッケージを確認できます。

  • src/ −このフォルダーは、Angular 7を使用してプロジェクトで作業する場所です。src/内には、プロジェクトのセットアップ中に作成されたapp /フォルダーがあり、プロジェクトに必要なすべてのファイルが保持されます。

angle7-app /フォルダーには次のものがあります file structure −

  • angular.json −基本的に、プロジェクト名、CLIのバージョンなどを保持します。

  • .editorconfig −これはエディターの構成ファイルです。

  • .gitignore −リポジトリのクローンを作成する他のユーザーと無視ルールを共有するために、.gitignoreファイルをリポジトリにコミットする必要があります。

  • package.json − package.jsonファイルは、npminstallを実行したときに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"

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

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

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

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

アプリ

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

app.module.ts

ファイルを開くと、インポートされたさまざまなライブラリへの参照がコードに含まれていることがわかります。Angular-cliは、インポートに次のデフォルトライブラリを使用しています：angular / 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からインポートされ、次のプロパティを持つオブジェクトがあります-

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

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

Providers−これは作成されたサービスへの参照を持ちます。このサービスについては、次の章で説明します。

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

app.component.css−ここにCSSを書くことができます。現在、以下に示すように、divに背景色を追加しています。

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

.divdetails {
   background-color: #ccc; 
}

app.component.html

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.component.html', 
   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

どちらのファイルにも、最終ファイルを本番環境と開発環境のどちらでコンパイルするかについての詳細が含まれています。

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

favicon.ico

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

index.html

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

<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.component.html ファイル。

main.ts

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

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があります。したがって、ブラウザで実行する場合、ファイルはindex.htmlと呼ばれます。Index.htmlは、次のコードが実行されたときに親モジュール、つまりAppModuleを呼び出すmain.tsを内部的に参照します。

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

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

bootstrap: [AppComponent]

に app.component.ts、セレクターがあります： app-rootこれはindex.htmlファイルで使用されます。これにより、に存在するコンテンツが表示されますapp.component.html。

以下がブラウザに表示されます-

polyfill.ts

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

styles.css

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

test.ts

ここでは、プロジェクトをテストするための単体テストケースを扱います。

tsconfig.app.json

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

tsconfig.spec.json

これは、テストの詳細を維持するのに役立ちます。

types.d.ts

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

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved