Angular 8 First App
Let’s see how to create an Angular 8 application.
To create an app
Syntax:
For example: Here, we are going to create an app named “angular8firstapp”
You can see that a folder is created. This is your first created app of Angular 8.
Open this folder and you will see the some subfolders.
Here, src is the main folder of your project. Open the src folder and you will see some other subfolders.
This app folder is the root of your Angular 8 app. Open this folder and you will see some .ts, html and css files.
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:
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.
Open your browser and go to local host at: http://localhost:4200/
Now, you can see that your app is running now.