How to Run the Angular Project [Step-By-Step Explanation]

AngularJS is a must-have for any full-stack developer. It is crucial for front-end development as it simplifies the use of HTML directives. Developing a web app becomes much easier when you use Angular. So in this article, we’ll discuss how you can get started with Angular. We’ll discuss how to install Angular and how to run an Angular project. 

Check out our free courses related to software development.

Explore Our Software Development Free Courses

Angular CLI: A Brief Introduction

If you want to work on Angular projects, you should have Angular CLI. It is Angular’s official tool for working on Angular projects and initializing them. Angular CLI reduces many hassles from the initialization process. You don’t have to perform multiple configurations and build tools to start a project if you’re using Angular CLI. 

Angular CLI allows you to start a project with only one command. With another command, you can serve the project using a local development server. Angular CLI works on Node.js. So, to run Angular CLI on your system, you should have Node.js in your system first. 

Check out upGrad’s Full Stack Development Bootcamp

Node.js is for servers and to develop server-side applications, while Angular is a front end solution. Node.js helps you with Angular CLI only. 

Learn Software Development Courses online from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs or Masters Programs to fast-track your career.

How to Install Angular?

First Step

Before you install Angular in your system, you should have Node and npm in your system. You can use the Node Version Manager to install it, or you can use the official package manager of your OS. You also have the option to install Node from its website. We recommend installing it from the website as it’s quick and straightforward. You’d only have to head to the download page of node.js. 

Check out upGrad’s Java Bootcamp

Second Step

Once you’re on the download page of node.js, select the version you need according to your operating system then follow the steps specified in the installation wizard. If you have already installed node.js in your system before, you can skip this step (and the previous one). 

Third Step:

To check if Node is installed in your device or not, open the command prompt and run the following command: 

$ node -v

It would show the currently installed version of Node in your system. 

Explore our Popular Software Engineering Courses

Third Step

After checking if you have Node installed in your system, you can install Angular in your device by running the command prompt’s following command:

$ npm install @angular/cli

After running the command above, Angular CLI will install in your device. You have completed the ‘how to install Angular’ part. 

Learn: Angular Developer Salary in India: For Freshers & Experienced

How to Run Angular Project?

As we have installed Angular in our system, we’d now focus on starting a new project. 

First Step

We’d create a workspace and the starter app by running the following command:

ng new angular-tour-of-heroes

We have added angular-tour-of-heroes as the name for our workspace. The ‘ng new’ command will prompt you about the features you want to add in the starter app. As it’s a tutorial, we’ll select the defaults and proceed by pressing Return or Enter. 

upGrad’s Exclusive Software and Tech Webinar for you –

SAAS Business – What is So Different?

Second Step

Now, Angular CLI has installed the required npm packages and dependencies. You’d have a ready to use ‘Welcome app’ and a new workspace. You’d also have a root folder with the same name as the app (angular-tour-of-heroes), and a skeleton app project. 

In this step, we have to serve the application. We’ll do that by heading to the workspace directory and launch the app:

cd angular-tour-of-heroes

ng serve –open

The ‘ng serve’ command would create the app, start the development server, look after your project’s source files, and rebuild your app as you modify the necessary files. 

In-Demand Software Development Skills

Third Step

If you want to modify the app, you’ll have to head to the src/app folder in your IDE or editor. We’ll edit our app by changing the components of this project. Components are the building blocks of Angular apps. They handle almost all the fundamental functions of an Angular project, such as showing data, responding to input, etc. 

In this step, open your IDE and head to the project directory and find the component files of your project:

• app.component.ts
• app.component.html
• app.component.css 

The first file is the class code and is based in TypeScript, the second file is the template in HTML, and the final one has the private CSS styles. 

Fourth Step

Our project is set up, and we have all the files ready. In this step, we’ll personalize it by adding a title to it. To change your Angular project title, go to the app.component.ts file and delete the default template present. Angular CLI generates a generate template automatically. You can replace it with the following:

<h1>{{your title}}</h1>

The curly braces are the interpolation binding syntax. You can replace ‘your title’ with your desired title. Once you have entered the desired title, refresh the browser, and your application would have the new title. 

Fifth Step

Personalization of the app would be incomplete without any styling. So, in this step, we’ll modify the style of our Angular app. Angular CLI generates an empty styles.css for your application when you create a new project. You can enter your desired styles here. 

Open the src/styles.css file in your IDE and start modifying the application’s style. Modify the styles of the app and save the changes. When you refresh the browser, you’ll see the changes in your app. 

Checkout: How To Implement Pagination in Angular JS?

Read our Popular Articles related to Software Development

Learn More About Angular and Full-Stack Development

Now you know how to install Angular in your system and how to run an Angular project. Once you get its hang, you’ll see that working with Angular is much easier than you thought. With a little experience, you can start working on front-end web development projects with Angular. 

If you are interested in learning more about Angular and front-end web development, then here are some additional resources:

• Front-end Developer Resume Guide
• Top 10 Skills to Become a Front-end Developer
• Front-end Project Ideas

On the other hand, you can take a full-stack development course and learn from industry experts through videos, projects, and quizzes. 

If you’re interested to learn more about full-stack software development, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.