Angular基礎チュートリアル:クイックスタート

良いツールは開発を半分にすることができます.
Angular CLIは、プロジェクトの作成、ファイルの追加、テスト、バンドルの圧縮、導入など、コマンドラインインタフェースツールです.
このセクションの主な目的は、Angular CLIを使用してTypeScriptを含むangularアプリケーションを構築し、実行することです.このセクションが完了すると、CLIの開発について基本的な理解が得られます.
開発環境の構成
1、nodejs 2、npm 3、Angular CLI
グローバルインストールCLIの実行

npm install -g @angular/cli

ただし、nodeとnpm環境が準備されていることを確認してから、nodeとnpmのインストール方法については、自分でチュートリアルを検索してください.
プロジェクトの作成
ターミナルコマンドウィンドウを開き、次のコマンドを入力します.

ng new my-app

サービスの開始my-appフォルダへ

cd my-app

サービスの開始

ng server  --open #      ng serever -o

サービスが正常に起動すると、プログラムは自動的にブラウザウィンドウを開き、ブラウザにhttp://localhost:4200/を入力して表示できない場合は、4200がデフォルトのポート番号です.
最初のangularコンポーネントを編集
プロジェクト構造CLIによって作成されたばかりのプロジェクトです.ディレクトリsrc\app\の下にあるコンポーネントを作成しました.このコンポーネントはルートコンポーネントで、app-rootと名付けられ、app.component.tsを開きます.

import { Component } from '@angular/core';

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

何が変わるか見てみましょう

export class AppComponent {
  title = 'my first angular application!';
}

titleの内容をmy first angular application!に更新して保存すると、端末に再コンパイルされた情報の出力があることがわかります.これは、ng server --openのコマンドがファイルを監視し、すべてのファイルの変更がアプリケーションの再コンパイルを引き起こすためです.http://localhost:4200/を開いて出力結果を表示
まとめ
これで、angularの最初の「hello world」バージョンの応用が完了しました.