Home » Angular 8 First App

Angular 8 First App

Let’s see how to create an Angular 8 application.

To create an app


For example: Here, we are going to create an app named “angular8firstapp”

Angular 8 First App

You can see that a folder is created. This is your first created app of Angular 8.

Angular 8 First App

Open this folder and you will see the some subfolders.

Angular 8 First App

Here, src is the main folder of your project. Open the src folder and you will see some other subfolders.

Angular 8 First App

This app folder is the root of your Angular 8 app. Open this folder and you will see some .ts, html and css files.

Angular 8 First App

Files used in Angular 7 App folder

Angular 7 App files which are mainly used in your project are given below:

  • src folder: This is the folder which contains the main code files related to your angular application.
  • app folder: The app folder contains the files, you have created for app components.
  • app.component.css: This file contains the cascading style sheets code for your app component.
  • app.component.html: This file contains the html file related to app component. This is the template file which is used by angular to do the data binding.
  • app.component.spec.ts: This file is a unit testing file related to app component. This file is used along with other unit tests. It is run from Angular CLI by the command ng test.
  • app.component.ts: This is the most important typescript file which includes the view logic behind the component.
  • app.module.ts: This is also a typescript file which includes all the dependencies for the website. This file is used to define the needed modules to be imported, the components to be declared and the main component to be bootstrapped.

Install Visual Studio Code IDE or JetBrains WebStorm

You must have an IDE like Visual Studio Code IDE or JetBrains WebStorm to run your Angular 7 app.

VS Code is light and easy to setup, it has a great range of built-in code editing, formatting, and refactoring features. It is free to use. It also provides a huge number of extensions that will significantly increase your productivity.

You can download VS Code from here: https://code.visualstudio.com

JetBrains WebStorm is also a great IDE to develop Angular 7 apps. It is fast, attractive, and very easy to use software but, it is not free to use. You have to purchase it later, it only provides a trial period of 30 days for free.

You can download Jetbrains Webstorm from here: https://www.jetbrains.com/webstorm/download/#section=windows

Here, we are using VS Code IDE:

Angular 8 First App

You can see that your project is open in the VS Code IDE. You can also make changes in .ts and html files to change your output accordingly.

Run your app

Open your node.js command prompt and go to your project by using cd command and then run the ng serve command to compile and run your app.

Angular 8 First App

Open your browser and go to local host at: http://localhost:4200/

Angular 8 First App

Now, you can see that your app is running now.

You may also like