Create a new angular application - learn angular from scratch with Junaid Hassan
#02 – Create First Angular Application – Learn Angular 9 From Scratch with Junaid Hassan

This is the second part of the series “Learn Angular 9 From Scratch”. In this post, we will learn how to create a new Angular application using Angular Command Line Interface i.e. Angular CLI. We will also learn about two new Angular commands i.e. ng new and ng serve. We will also test our new Angular application on localhost.

Create a New Application

  • Open command prompt as an administrator
  • When you open the command prompt, you will be inside the directory C:\WINDOWS\System 32>
  • Change directory / CD into the folder where you want to create a new Angular application (see screenshot 1) e.g. to change the current directory to D drive, type D: and hit Enter.
  • Run the command: ng new myapp // change ‘myapp’ to whatever name you want for your application
  • Now Angular CLI will ask two questions i.e. would you like to add Angular routing? (I have selected Yes, because we will implement routing in our application) and which stylesheet format would you like to use? (I have selected CSS but you can select other format as well) [see screenshot 1]
  • After the confirmations, Angular CLI will install all necessary packages and their dependencies and will create a new Angular application inside the folder ‘myapp’
Screenshot 1: Create a new application using the command: ng new myapp
Screenshot 1: Create a new application using the command: ng new myapp

Test the Application

  • Change directory / CD into folder ‘myapp’ e.g. cd myapp
  • Run the command: ng serve
  • Angular CLI will compile the application code and will serve the application on http://localhost:4200 (see screenshot 2)
  • Now you can test the application on http://localhost:4200 (see screenshot 3)
Screenshot 2: Serve the Angular application using the command: ng serve
Screenshot 2: Serve the Angular application using the command: ng serve
Screenshot 3: Demo of the newly created Angular application
Screenshot 3: Demo of the newly created Angular application

In the next post, we will learn what are the components and how to create components in an Angular application using Angular CLI. Stay tuned!

https://www.youtube.com/watch?v=mhWTFNNUTxA

Leave a Comment

Your email address will not be published. Required fields are marked *