Here is the previous part of the article: Part 2
In this third part, we address the setup of the Angular 4 project, as we use it as framework for front-end development and with which we will create our Single Page Application.
First, we must have the necessary environment for the creation of a Angular 4 project and then:
- NodeJS: it’s the JavaScript run-time for running server-side code
- NPM: it’s the package manager for JavaScript packages, used by default by NodeJS
- Angular CLI:it’s the Angular Command-Line Interface, that provides us commands to create, test, and run projects
- TypeScript: it’s the open source language developed by Microsoft as superset of JavaScript to enrich it with, primarily, static type definition and object-oriented prototyping paradigms capabilities. The TypeScript code is then compiled, or transpiled , as it is used to define a compilation that from a source code generates another source code (source-to-source compiler ), in standard JavaScript code
The quickest way to do this is to install the Angular IDE Plugin for Spring Tool Suite . To do so, we access the Eclipse Marketplace from the “Help” menu
and we enter the string “ Angular IDE in the search field. The first of the returned results is what we need to install.
When the installation is complete, Spring Tool Suite asks to be restarted. Once we’ve restarted it, we can see that a new Angular perspective appears in the bottom right of the IDE toolbar.
If the icon of the new Angular perspective is not immediately available, it is still possible to activate it from the menu, selecting “Window” -> “Perspective” -> “Open Perspective” -> “Other” and then choosing “Angular”.
In addition to the new perspective, we can also note that the entry “Angular CLI” appeared in the IDE interface in the “Servers” panel at the bottom left. We will see soon, once we have created our first Angular 4 project, what it will be for.
Creating an Angular 4 project
Once positioned in the new Angular perspective of Spring Tool Suite we can create a new Angular project. Selecting from the menu “File” -> “New” we see that now appears among the available choices also “ Angular Project ” which of course is the item that we choose.
We give a name to our project, for example “springboot-example-angular4-frontend”, and choose the versions of NodeJS, NPM and the Angular CLI (Command Line Interface) to use.
Once we click on “Finish”, it starts the installation and configuration of the environment with everything we need.
Following this, the project is created by executing the appropriate command of the Angular Command-Line Interface: ng new
As we can see from the following screenshot at some point the command is in fact executed:
ng new springboot-example-angular4-frontend
At the end of the procedure we get a message saying that our project has been correctly created and, consequently, we see it appear in the “Project Explorer” panel of Spring Tool Suite and also in the “Servers” panel at the bottom left, under the heading “Angular CLI”.
The structure of the new Angular project created is the one shown in the following figure. For the moment we do not go into the detail of all the folders and files generated with the creation of the project. For a detailed description of each of them you can consult the QuickStart page of the Angular documentation itself.
However, we can see that at the first level there are 3 folders:
- src: contains all the content of our application, therefore, components, CSS styles, static resources, images, etc.
- e2e: contains the necessary for the execution of the tests and is in fact for end-to-end
- node_modules: is the folder created by Node.js for the management of third-party modules used in the project
For the moment we focus only on the “src” folder which, as mentioned, will contain our application. Inside we find:
- The index.html file: it’s the project homepage, in whose body is inserted the tag related to the “ app-root ” component which constitutes the root component of the page, in which we will add other components. In fact, within the index.html file we find the definition:
- The app folder: it contains the application root Component, with its TypeScript definition, its html template, and its css stylesheet. This component is the one that will be rendered as “app-root” tag in the homepage.
The app folder also contains the app.module.ts file which represents the so-called application Root module - The assets folder: it is the folder where we will put all the static resources, such as images and other files to be referenced, which will be included in the application.
- The environments folder: it contains the configuration files of the various environments, such as development, testing, production, etc.
Run the Angular project
To launch the Angular project, we must run the following command from the Command Line Interface integrated into the Spring Tool Suite
ng serve
Once the bundle build is complete, we can see in the Spring Tool Suite “Servers” panel that our “springboot-example-angular4-frontend” project is in “Running” state and is running locally on the port 4200 .
We can now open the browser pointing to the address localhost:4200 and we can see the default welcome page of the newly created Angular project.
But, wait a moment. On the 4200 port? So we are saying that we have the Spring Boot application, with our back-end, which runs on port 8080 and the Angular 4 project that run independently on another port?
Yes, for now.
In the next article we will see how to integrate the two parts when we are developing and, above all, how to get, in the build phase, a single package to deploy in the production environment.
So, let’s get back for now to our running Angular application. The content that we see on the browser is that of the root “app” component that contains the tag
Welcome to {{title}}!!
Here we note the typical Angular syntax with the double brace {{ }} indicating that “title” is binded with the value of the homonymous variable defined inside the Component, that is, in the file app.component.ts , and that therefore its value will vary with that of the variable itself. In the Component, in fact, we find the declaration:
export class AppComponent { title = 'app'; }
If we now try to change the value of the “title” variable, for example by replacing the string “app” with the string “davismol.net Tutorial”
export class AppComponent { title = 'davismol.net Tutorial'; }
We see that, when saving the file, the Angular application is immediately recompiled on the fly and, if there are no errors, the browser page is automatically refreshed showing the updated version with the changes made.
At this point we have a working basic Angular 4 application in addition to the Spring Boot backend that we implemented in the first part of the article.
Pingback: Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 2 | Dede Blog
please provide integration