Angular8 First App

Angular8 First App

Let's see how to create an application that's Angular 8.

To create an app

Syntax:

ng new app_name

For example: We'll build an app here called "angular8firstapp"

ng new angular8firstapp

You can see that they are creating a tab. This is your first Angular 8 app ever created.

Open this folder and you will see the some subfolders.

Here, the project 's main folder is src. Open the src folder, and see other subfolders.

The root of your Angular 8 app is this App folder. Open this folder and you'll see some files like .ts, html , and css.

Files used in Angular 7 App folder

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

• SRC folder: This is the folder containing the main code files associated with your angular program.
• app folder: The app folder contains the files, you have generated for app components.
• App.component.css: This file contains the cascading style sheet code for the component of your app.
• App.component.html: This file includes the app-component html file. This is the template file used to binding the data by angular.
• App.component.spec.ts: This file is an app-related unit-test file. This file is used in along with other tests on units. It is run by command ng check from Angular CLI.
• App.component.ts: This is the most important typescript file which contains the component view logic.
• App.module.ts: This is also a typescript file which contains all the website dependencies. This file is used to define the required modules to be imported, the declared components and the bootstrapped main component.

Install Visual Studio Code IDE or JetBrains WebStorm

To run your Angular 7 app, you must have an IDE such as Visual Studio Code IDE, or JetBrains WebStorm.

VS Code is lightweight and easy to set up, with a wide range of built-in code editing, formatting, and refactoring features. Utilization is free. It also provides a huge number of extensions which will increase your productivity considerably.

VS Code is available for download from here: https:/code.visualstudio.com

JetBrains WebStorm is also a fantastic IDE for developing Angular 7 apps. It's fast, attractive and software very easy to use, but it's not free to use. You need to buy it later, it only provides a 30-day trial period for free.

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

Here, we use VS Code IDE:

In the VS Code IDE, you can see that your project is open. You can also make changes to the.ts and html files to change the performance accordingly.

Run your app

Open your node.js command prompt and use the cd command to go into your project, then run the ng serve command to compile and run your app.

ng serve 

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