Angular 環境構築と基本コマンド

2846 ワード
Angular2 Angular2 テキストリンク

Angularとは

  • Googleが開発したプログラミング言語
  • AngularJs(1.x)とは別物
  • TypeScriptベースで作られている
  • HTMLとTypeScriptでSPAを開発するためのプラットフォームであり、そしてフレームワークである

Angularの環境構築

node.js

node.jsが必要です。
React入門でやったこちらを参考にインストールしてください。

Angular CLI

Command Line Interfaceの略でしょうか。

Angularアプリのプロジェクト生成や実行などが行えるコマンドラインツールをインストールします。

npm install -g @angular/cli

インストールが完了したら、下記コマンドを実行しインストールが正常に完了していることを確認します。

ng version

こんな風に表示されると思います。

VSCode

ここからダウンロード
してください。

日本語化などググるとすぐ情報がたくさん出てきますので、こちらでは説明は省きます。

プロジェクトの作成

ng new プロジェクト名

起動確認

作成したプロジェクトへ移動して下記コマンドを実行します。

ng server --open

こんな画面が出たらOKです。

ちょっとだけ

index.htmlのapp-rootはapp-component.tsのselector部分と紐づいています。

Component作成コマンド

ng g component コンポ名
又は
ng generate component コンポ名

AppRoutingModuleの追加

ng generate module app-routing --flat --module=app

メモ

  • StackBlitzとは
  • Angularのコア、共有モジュール