Java デベロッパー向けの Angular 入門② - Angular を起動するまでの手順について

こんにちは！

テクニカルコンサルティングチームの古堅です。

本記事は Java デベロッパー向けの Angular 入門をテーマにした連載記事の 2 記事目となります。

本記事のゴール

この記事では、Angular サンプルをダウンロードから実行までの流れを解説していきます。

以下、前回の記事です。

Angular のサンプルをダウンロード

以下のページからダウンロードできます。

サンプルの構成など、詳細については以下の記事をご参照ください。

zipファイルを解凍

ダウンロードすると "IgniteUI_Angular_Application_Template_Master_JP.zip" というファイルがダウンロードできます。

ファイルを解凍すると、以下のフォルダ構成になっております。

IgniteUI_Angular_Application_Template_Master_JP
 └─igniteui-angular-application-template-master

① npm install / 必要ライブラリのインストール / Java の Meven や、Gradle と同等

まずは、解凍した下記フォルダ igniteui-angular-application-template-master に移動しましょう。

cd igniteui-angular-application-template-master

下記の npm コマンドを実行してください。
(※npm をまだインストールしてない場合は、"npm が未インストールの場合"をご参照ください)

Angular アプリケーションに必要なライブラリを、依存関係が記載された package.json を元に、ノードパッケージ管理から取得します。

npm install

上記コマンドの実行が完了すると、必要なライブラリが node_modules フォルダに格納されます。

ライブラリの依存関係の管理について

Angular では、必要なライブラリの依存関係を、設定ファイル package.json で管理しています。

Java でいうところの、Maven であれば　pom.xml 、Gradle であれば build.gradle と同等の設定ファイルとなります。

以下、package.json の一部中身を抜粋して記載しています。dependencies に、依存関係があるライブラリ名が記載されています。

{
  "name": "app-template",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-serve": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.4",
    "@angular/common": "~11.0.4",
    "@angular/compiler": "~11.0.4",
    "@angular/core": "~11.0.4",
    "@angular/forms": "~11.0.4",
    "@angular/platform-browser": "~11.0.4",
    "@angular/platform-browser-dynamic": "~11.0.4",
    "@angular/router": "~11.0.4",
    "@types/hammerjs": "^2.0.36",
    "angular-in-memory-web-api": "^0.9.0",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^11.0.8",
    "igniteui-angular-charts": "^11.1.0",
    "igniteui-angular-core": "^11.1.0",
    "igniteui-angular-i18n": "^11.0.0",
    "jszip": "^3.1.5",
    "minireset.css": "~0.0.4",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },

npm が未インストールの場合

まだ npm がインストールされていない場合、下記のページを参考にインストールしてください。

② ng serve / Angular の実行 / Java の Tomcat や GlassFish の起動と同等

以下のコマンドで、アプリケーションを実行できます。

ng serve

無事、コマンドの実行が完了すると、既定のブラウザが立ち上がり、以下の URL にアクセスします。

ng serve コマンドの解説

ng serve コマンドは、Web サーバーの起動と、必要なリソースファイルの配置を行います。

Java で例えると、Tomcat や GlassFish の起動とリソースの配置と同じようなコマンドだと思ってください。

③ (参考) ng build / パッケージ化 / Java の jar または war 化と同等

最後に、ng build コマンドを紹介します。

このコマンドは、コード開発時にはあまり使われることはありませんが、Angular アプリケーションの実行に必要なファイル一式をパッケージ化してくれます。

ng build 

Java で例えると、java -jar コマンドのようなものです。

運用する Web サーバーに配置する前に必要な手順となりますので、コード開発時には、あまり意識しなくても良いのですが、運用フェーズ以降は重要なコマンドなので「こういうコマンドがあったなー」と、頭の片隅にでも置いてもらえれば良いかなと思います。

(補足) Angular のインメモリ Web API について (開発時に役立つ仕組み)

本 Angular のサンプルで既に採用している仕組みの一つで、Angular の仕組みで インメモリ Web API という仕組みがあり、特にバックエンドの Web API がまだ出来ていない、開発途中のフェーズにおいて、非常に役に立ちます。

この仕組みを利用すると「あたかも WebAPI と通信しているようにインメモリでデータを管理」が出来ます、つまりバックエンドのモック化ですね。

以下、参考ドキュメント

インメモリ Web API は、Web API が完成したら置き換え

本シリーズは Angular と Java を組み合わせて動作することを目標にしていますので、最終的にインメモリ Web API を Java で作成したバックエンドの Web API と通信するよう置き換えます。

この手順について、次回以降 Java のサンプルを交えて紹介します。

まとめ

無事、サンプルを起動できましたでしょうか。

次回の記事では、本記事でも少し触れた インメモリ Web API を Java の WebAPI に置き換えて、実際に動作するところまで紹介したいと思います。

Ignite UI for Angular トライアル版を利用するには

インフラジスティックスでは充実した UI コンポーネントライブラリーを収録し、データリッチでレスポンシブなWebアプリケーションをより迅速に構築することを可能にする Ignite UI を開発しており、Angular 対応の Ignite UI for Angular もリリースしています。

Ignite UI for Angular はトライアル版での試用が可能です。

製品に関する技術的な問い合わせは こちらのページ よりアカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。

また、製品をご購入をご検討のお客様は こちらのページ より

開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各開発プラットフォームの技術トレーニング、コンサルテーションの提供、開発全般のご支援を行っています。

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せはこちらからお気軽にご相談ください。

技術サポート・無料オンライン相談会をご利用ください

インフラジスティックスのUI製品は多くの機能を備えているためドキュメントの情報量も多く、なかなかお探しの情報に辿り着けない場合もあります。そういった際はお気軽に技術サポートや、製品導入支援担当との無料オンライン相談会をご予約いただくことで検証時間を節約可能ですので、ぜひご活用ください。

技術サポートへの問い合わせ方法を確認する

無料オンライン相談会を予約する