Develop First Web Page With Angular

How To Develop And Deploy Your Web App (Angular + Tomcat Server + MySQL) — Part 1

Part 1: Develop First Web Page With Angular
Part 2: Install Tomcat On Server (Mac & Linux)
Part 3: Develop Java API Running On Tomcat Server
Part 4: Install MySQL And Create Database (Local & Remote Server)
Part 5: Connect To MySQL Database in Java API and Deploy It On Tomcat Server (Local Server & Remote Server)

Kuchu Teien Observatory in Japan (By Mia)

This is an extremely simple web app example for beginners and I spent only few days learning and building this web. I hope this will give a hint for those who want to learn how to build and deploy a web both frontend and backend.

This is a web application which contains both frontend and backend. I develop frontend with Angular and backend with Java API program running on Tomcat server. It will request data from MySQL database using Java API and display the data on web page.

Here’s the basic logic:

• Develop frontend web page with Angular
• Config Tomcat server (Tomcat installation)
• Develop Java API program (Running on Tomcat server and manage requests from frontend. Frontend <-> API)
• Create MySQL database (Store data on backend server)
• Develop Java API program (Connect to database and request data from database. API <-> Database)

In my tutorials, my purpose is to deploy backend program on remote server at the end. But I usually deploy on the local computer for testing. Thus, I’m gonna share these two deploy ways together — First on local server, then on remote server.

• Introduction
• Prerequisites
• Develop Frontend With Angular
• Conclution
• References

Introduction

In this article, I will show you how to develop frontend web page with Angular first. Other steps please refer to my other articles (Links are in More section).

First of all, I’m going to build a web using RESTful web service just to display some simple data from my remote server instead of localhost database. The main purpose is to walk through the whole process.

• Frontend: Angular
• Backend: Tomcat Server
• Database: MySQL

Why Angular? It’s popular and supported by Google.

Why Tomcat but not Node.js? Just because the projects in my company are using Tomcat. I will try Node.js in the near future. (Actually, I’m not clear about their differences. Please check this answer from Stack Overflow.)

Why MySQL? Hmmm, also popular. Will try MongoDB too in the future.

Prerequisites

• My local computer is MacOS
• Visual Studio Code (Code editor for Angular)
• Angular 9 (Install Your First App with Angular CLI)

Note: You can choose other code editors or version you like. Those are just for your reference.

Develop Frontend With Angular

Create A New Angular Project

Tutorial here: How To Create First App with Angular CLI

Notes:

• Make sure you have NPM. If not, follow steps from the above tutorial.
• It doesn’t matter in which directory you are before you execute the npm install command.
• I recommend to add routing. You can choose other stylesheet except CSS. When you see successfully, everything’s done!

Create Angular project

Create Your Web Page With Visual Studio Code

Since you’ve create a new project successfully using some commands in terminal. You can close your terminal and use your Visual Studio Code to edit your web code now.

To test your Angular page, open your terminal in Visual Studio Code by pressing Ctrl + ` or open View -> Terminal.

How to open terminal in Visual Studio Code

Run ng serve --open command to open the web page. (--open means it will auto open the web page once compile completed.)

Enter command in Visual Studio Code terminal

Execute ng serve command

Default Angular page

We just need to focus these files in this article because I want everything is the simplest and I’m not gonna create a fancy page.

Some frequently used files

• ANGULARWEB: My project name, root directory.
• src/app/: My Angular component. Web pages are made of many components in Angular.
• .ts files: Written in TypeScript.

We can delete all codes in app.component.html:

Replace your code here

Replace your code as following:

<h1>Angular Web Title</h1>
<p>Hello world!</p>

When you save your changes ( Command + S ), Angular will auto compile your files and refresh the page.

Note: Angular has many interesting functions. I will write more tutorials for beginners if I have time. :)

More…

The following parts could be found in my other articles.

• Part 1: Develop First Web Page With Angular
• Part 2: Install Tomcat On Server (Mac & Linux Server)
• Part 3: Develop Java API Program Running On Tomcat Server
• Part 4: Install MySQL And Create Database (Local & Remote Server)
• Part 5: Connect To MySQL Database in Java API and Deploy It On Tomcat Server (Local Server & Remote Server)

References

• What is Full Stack Developer
• Angular vs React vs Vue
• Install Your First App with Angular CLI