【Angular】アプリケーション作成

AngularのCLIツールであるAngular CLIを使ってデフォルトのWEBアプリケーションを作成し、自動テストを実行していきます。

Angular

The web development framework for building modern apps.

前提条件
Angular CLI インストール
ワークスペース作成
アプリケーション起動
Angularアプリケーションのフォルダ構成
自動テスト実行

前提条件

Node.jsインストール済
Ubuntu24.04(WSL2)
Angular v18

Node.jsのインストールについては次の記事をご覧ください。

Angular CLI インストール

Angular CLI をインストールします。

npm install -g @angular/cli

ワークスペース作成

ワークスペース「my-app」を作成していきます。

ng new my-app

どのスタイルシートを使うか訊かれるので「CSS」を選択して[Enter]で確定します。

「SSR」を有効にするか訊かれるので、今回は「N」を入力し[Enter]で確定します。

「my-app」フォルダ内に最小構成のAngularアプリケーションが展開されます。

「my-app」フォルダに入ります。

cd my-app

アプリケーション起動

次のコマンドでアプリケーションを起動します。

ng serve --open

「–open」オプションにより、ターミナルで表示されているURL

http://localhost:4200/ がWEBブラウザで自動的に開きます。

Angularのデフォルトページが表示されました。

Angularアプリケーションのフォルダ構成

[ワークスペース]
├ .angular/
├ .git/
├ .gitignore
├ README.md
├ angular.json　・・・Angular CLIの設定
├ node_modules/　・・・node.jsモジュール群
├ package-lock.json　・・・node.jsパッケージバージョン情報
├ package.json　・・・node.jsパッケージ依存設定
├ public/ ・・・公開静的ファイル群
├ src/ ・・・コンポーネント、データ、アセット等
│　├ app/　・・・コンポーネント、テンプレート、スタイル等
│　│　├ app.component.css　・・・Appコンポーネント用CSS設定
│　│　├ app.component.html　・・・Appコンポーネント用HTMLテンプレート
│　│　├ app.component.spec.ts　・・・Appコンポーネント用Unitテスト
│　│　├ app.component.ts　・・・ルートコンポーネント
│　│　├ app.config.ts　・・・アプリケーション設定
│　│　└ app.routes.ts　・・・ルーティング設定
│　├ index.html　・・・メインHTML
│　├ main.ts　・・・メインエントリーポイント
│　└ styles.css　・・・全体に適用されるCSS
├ tsconfig.app.json　・・・アプリケーション用Typescript設定
├ tsconfig.json　・・・ワークスペース用Typescript設定
└ tsconfig.spec.json　・・・自動テスト用Typescript設定

自動テスト実行

次のコマンドで自動テストを実行します。

ng test

同時にUbuntu上でWEBブラウザが起動し、Karmaによるテスト結果が表示されます。

UbuntuへのGoogle Chromeのインストールについては、次のページをご覧ください。

WSL で Linux GUI アプリを実行する

WSL で Linux GUI アプリの実行がどのようにサポートされるかについて説明します。

今回は以上です。

次回はコンポーネントの作成と読込です。