Project using Angular 7 :

We have all the requirements in our machine with node and npm also . Go through previous pages for Environment setup .

project setup :

First we will start a project , to create a project in Angular 7, we will use the following command −

ng new projectname

You can use the projectname of your choice. Now run the above command in the command line.

Once you run the command it will ask you about routing as shown below :

Type ‘y‘ to add routing to your project setup.

The next question is about the Stylesheet

The options available are CSS, Sass, Less and Stylus. In the above screenshot, the arrow is on CSS.

To change, you can use arrow keys to select the one required for your project setup. At present, we

shall discuss CSS for our project-setup.

When you will choose the CSS you will get some processing window like :

Installation : Angular 7

The project angular7-app is created successfully. It installs all the required packages necessary for our project to run in Angular7. Let us now switch to the project created, which is in the directory angular7-app.

Change the directory in the command line using the given line of code −

cd angular7-app

Choose IDE :

We will use Visual Studio Code IDE for working with Angular 7, you can use any IDE, i.e., Atom, WebStorm, etc.

How to download IDE for angular ?

To download Visual Studio Code, go to https://code.visualstudio.com/ and click Download for Windows .

Click Download for Windows for installing the IDE and run the setup to start using IDE.

Following is the Editor −

We have not started any project in it. Let us now take the project we have created using Angular-CLI.

We will consider the angular7-app project. Let us open the angular7-app and see how the folder

structure looks like.

Now that we have the file structure for our project, let us compile our project with the following command −

ng serve

You will see the below when the command starts executing −

The web server starts on port 4200.

When you got a message ” Compiled Successfully ” , Type the url, “http://localhost:4200/” in the browser and see the output.

http://localhost:4200/

Once the project is compiled, you will receive the following output −

Once you run url, http://localhost:4200/ in the browser, you will be directed to the following screen −

Now made changes in app.component.html and app.component.ts file . to get Live changes in app .

Let us now make some changes to display the following content −

Ishu app is running! hello

Leave a Reply

Your email address will not be published.