Angular環境構築と簡単な体験のまとめ

Angular入門

Angular は、Google が開発したオープンソースの Web フロントエンドフレームワークです。2009 年に誕生し、Misko Hevery らによって作成されました。その後、Google に買収されました。これは、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。
プロジェクトの数によると、Angular (1.x、2.x、4.x、5.x、6.x、7.x、8.x、9.x) はインターネット上で最も広く使用されているフレームワークです。

Angular は TypeScript と react に基づいています。Vue と比較すると、Angular は中規模および大規模のエンタープライズプロジェクトに適しています。

Angular のバージョンに関しては、Angular は Angular 1.x の命名を Angular JS に公式に統一し、Angular 2.x 以上は総称して Angular と呼ばれます。

現在、Angular の最新バージョンは、2019 年 12 月 25 日時点で angular9.x です。公式紹介によると、Angular は数か月ごとにバージョンが更新される予定です。 Angular2.x 以降のすべての Angular バージョンの使用方法は同じです。このチュートリアルは、Angular7.x、Angular8.x、Angular9.x およびその他の将来のバージョンにも適用できます...

Angular を学ぶための必須の基礎: html、css、js、es6、ts

1.開発環境をインストールする

npm インストール -g タイプスクリプト
npm インストール -g @angular/cli

2. hello-worldプロジェクトを作成する

プロジェクトを作成する

ng 新しい angular2-hello-world

新しいプロジェクトのディレクトリ構造を表示する

cd angular2-hello-world
sudo apt ツリーをインストール
木 -F -L 1

。
├── angular.json
├── karma.conf.js
├── node_modules/
├── package.json
├── package-lock.json
├── README.md
├── 出典/
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

2 つのディレクトリ、8 つのファイル

srcディレクトリの構造を表示する

cd ソース
木 -F

アプリケーションを起動し、http://localhost:4200 で実行結果を表示します。

ngサーブ

hello-worldコンポーネントを作成する

ng-generate コンポーネント hello-world

hello-world.component.tsに新しいコンポーネントを定義する

//依存関係をインポートしますimport { Component, OnInit } from '@angular/core';

//コントロールのセレクターと関連ファイルの URL をアノテーションで宣言します
@成分（{
  セレクター: 'app-hello-world',
  テンプレート URL: './hello-world.component.html',
  スタイル URL: ['./hello-world.component.css']
})

//コンポーネントデータモデルのエクスポートクラスHelloWorldComponentはOnInitを実装します{

  コンストラクタ() { }

  ngOnInit(): void {
  }

}

hello-world.component.htmlでテンプレートを定義する

<p>mango、hello-world は動作します!</p>

新しく追加されたコンポーネントを使用するために、 app.component.html にタグを追加します。

<h1>
  <アプリのhello-world></アプリのhello-world>
</h1>

実行効果を確認するには、 ng サーブを実行します。

3. ユーザーを表示するためのuser-itemディレクティブを作成する

命令コンポーネントを生成する

mango@mango:~/angular2-hello-world$ ng コンポーネントユーザーアイテムを生成
src/app/user-item/user-item.component.css を作成します (0 バイト)
src/app/user-item/user-item.component.html を作成します (24 バイト)
src/app/user-item/user-item.component.spec.ts を作成します (641 バイト)
src/app/user-item/user-item.component.ts を作成します (286 バイト)
src/app/app.module.ts を更新 (585 バイト)

コンポーネントの名前フィールドを宣言して初期化する

'@angular/core' から Component、OnInit をインポートします。

@成分（{
  セレクター: 'app-user-item',
  テンプレート URL: './user-item.component.html',
  スタイル URL: ['./user-item.component.css']
})
エクスポートクラス UserItemComponent は OnInit を実装します {
  名前: 文字列、

  コンストラクタ() { 
    this.name = 'マンゴー';
  }

  ngOnInit(): void {
  }

}

テンプレート内の変数名の値を表示する

<p>
    {{name}} さん、Angular の世界へようこそ。
</p>

app.component.html に app-user-item を追加し、ブラウザの実行結果を表示します。

4. ユーザーリストを作成するuser-listコマンド

新しいコンポーネントの作成

mango@mango:~/angular2-hello-world$ ng コンポーネントのユーザーリストを生成
src/app/user-list/user-list.component.css を作成します (0 バイト)
src/app/user-list/user-list.component.html を作成します (24 バイト)
src/app/user-list/user-list.component.spec.ts を作成します (641 バイト)
src/app/user-list/user-list.component.ts を作成します (286 バイト)
src/app/app.module.ts を更新 (677 バイト)

コンポーネント内のnames配列を宣言して初期化する

'@angular/core' から Component、OnInit をインポートします。

@成分（{
  セレクター: 'app-user-list',
  テンプレート URL: './user-list.component.html',
  スタイル URL: ['./user-list.component.css']
})
エクスポートクラス UserListComponent は OnInit を実装します {
  名前: 文字列[];
  コンストラクタ() { 
    this.names = ['マンゴー', 'ナシ', 'ブドウ', 'リンゴ'];
  }

  ngOnInit(): void {
  }

}

コンポーネントのテンプレート内のnames配列を再帰的に走査する

<ul>
    <li *ngFor="let name of names">こんにちは {{name}}</li>
</ul>

コンポーネントを app.component.html に追加し、ブラウザの実行結果を確認します。

5. ユーザーアイテムとユーザーリストを組み合わせる

外部入力を使用するためにユーザーアイテムの名前パラメータを変更します

'@angular/core' から Component、OnInit、Input } をインポートします。

@成分（{
  セレクター: 'app-user-item',
  テンプレート URL: './user-item.component.html',
  スタイル URL: ['./user-item.component.css']
})
エクスポートクラス UserItemComponent は OnInit を実装します {
  @入力（）
  名前!: 文字列;

  コンストラクタ() { 
    
  }

  ngOnInit(): void {
  }

}

ユーザーリストのテンプレートを変更する

<ul>
    <app-user-item *ngFor="let name of names" [name]="name"></app-user-item>
</ul>

ブラウザ実行を保存して表示します。

6. 起動プロセス分析

ngはまず、angular.json内のプログラムのメインエントリポイント、つまりsrc/main.tsを探します。

{
            "出力パス": "dist/angular2-hello-world",
            "インデックス": "src/index.html",
            "メイン": "src/main.ts",
            "ポリフィル": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            「資産」: [
              "src/favicon.ico",
              「ソース/アセット」
            ]、
            「スタイル」: [
              "src/styles.css"
            ]、
            「スクリプト」: []
          }

main.tsファイルを確認し、開始されたモジュールがapp/app.module.tsにあるAppModuleであることを確認します。

'@angular/core' から enableProdMode をインポートします。
'@angular/platform-browser-dynamic' から { platformBrowserDynamic } をインポートします。

'./app/app.module' から { AppModule } をインポートします。
'./environments/environment' から { environment } をインポートします。

if (環境.production) {
  ProdMode を有効にします。
}

プラットフォームブラウザダイナミック()。bootstrapモジュール(AppModule)
  .catch(err => console.error(err));

app.module.ts では、このモジュール内のコンポーネント、依存する外部モジュール、および最上位コンポーネントとして開始された AppComponent が NgModule アノテーションを通じて宣言されていることがわかります。

'@angular/core' から NgModule をインポートします。
'@angular/platform-browser' から BrowserModule をインポートします。

'./app-routing.module' から { AppRoutingModule } をインポートします。
'./app.component' から { AppComponent } をインポートします。
'./hello-world/hello-world.component' から HelloWorldComponent をインポートします。
'./user-item/user-item.component' から { UserItemComponent } をインポートします。
'./user-list/user-list.component' から { UserListComponent } をインポートします。

@Ngモジュール({
  宣言: [
    アプリコンポーネント、
    HelloWorldコンポーネント、
    ユーザーアイテムコンポーネント、
    ユーザーリストコンポーネント
  ]、
  輸入: [
    ブラウザモジュール、
    アプリルーティングモジュール
  ]、
  プロバイダー: [],
  ブートストラップ: [AppComponent]
})
クラス AppModule をエクスポートします { }

以上がAngular環境構築の詳細と簡単な体験です。Angular環境構築の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: