Explore Angular 17: Building Your First Project From Scratch

Angular is a powerful front-end web development framework. Recently, the Angular community team has released the latest version, Angular 17. It came up with some cool features and enhancements in the previous version. We already discussed the latest features of Angular 17 along with the upgrade guide to Angular 17 as well. But, today, we will embark on an exciting journey into the world of Angular 17. We will kick start with the Angular Environement setup and will also create an Angular project. In this step-by-step guide, we’ll learn how to create our very first project in Angular 17 from scratch using this powerful framework. So bear with me let’s dive into this.

Understanding Angular 17

Angular 17 is a web development framework that simplifies the process of creating dynamic and interactive web applications. Whether you’re a seasoned coder or just starting, Angular offers a robust set of tools to make web development enjoyable.

What is Angular CLI?

Angular CLI stands for Angular Command Line Interface. This is a command-line tool provided by the Angular team. The main use is for creating, managing, and deploying Angular applications. It is designed to streamline the development process by automating common tasks. Also, it provides a consistent structure for Angular projects. Here are some key aspects of Angular CLI:

• Project Generation
• Development Server
• Code Generation
• Build and Optimization
• Testing
• Linting
• Configuration
• Angular Update etc.

Before moving ahead to start with Angular 17 there are some prerequisites that you need to follow.

Prerequisites

In order to start with Angular 17, your system needs the below configurations.

• Node Version at least ^18.13.0
• A Code Editor (VS Code Editor Recommended)

Step 1 – Install Node.js and npm

Angular requires Node.js and npm (Node Package Manager). You can download and install them from Node.js website. If you are a Windows and MacOS user, then no need to install npm additionally. It will be installed automatically with Node.js. However, if you are a Linux user then you will have to install that using the command prompt.

So, after successful installation, you can verify the installation. To check the Node JS version, you can open the terminal and hit the below command.

node --version

This will return the latest version of Nodes JS as shown below.

So, once, you are ready with the latest version of Node.js, let’s move to the second step.

Step 2 – Install Angular CLI

Open your terminal or command prompt and run the following command to install Angular CLI globally.

npm install -g @angular/cli

This will create an environment that will help to create and manage the Angular project.

After installing it, you can verify the installation using the below command.

ng version

This will return the Angular CLI version along with other configurations.

Now, you are good to go for creating the Angular project. Therefore, jump to the next step.

Step 3 – Create the Very First Project in Angular 17

We have the Node.js, npm, and Angular CLI ready. Therefore, let’s create the very first Angular project by hitting the below command in the terminal.

ng new hello-app

The above command ng new will create the Angular project and the project name will be hello-app.

This will take a couple of seconds to install the Angular framework. Now, in the next step, we will run the application.

Recommended: Angular 17 Upgrade Guide: Seamless Transition from Version 16

Step 4 – Serve the Application

After creating the Angular project, simply navigate to the project folder.

cd hello-app

Thereafter, open it in the VS code editor to walk through the project folder.

Now, run the application using the below command.

ng serve  // to run the project

OR

ng serve --open  // to run the project and open in the browser automatically

The application will start on localhost:4200 by default and you will have the new homepage of the Angular 17.

Now, let’s take a look at the project folder so that we will have some basic idea of that.

Step 5 – Quick Walkthrough of Angular 17 Project Folder

Inside the project folder, you will see the node_modules that contains all the package dependencies of the framework along with any third-party library or package that you will use.

The main folder src (source) all the components, routers, assets, etc related things.

Now, let’s understand how the Angular homepage is rendered.

• Inside the src folder, there is an index.html file that is shown below.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Inside this HTML you can see there is <app-root></app-root> this is a root hierarchy of the component. All the child components will be rendered inside this only.

Now, if you look into the app folder, you will see a couple of files there. The important one is the app.component.ts. Here, you will be able to write your functional part and the business logic. Anything that you will return from this component class, will be returned to the component HTML file.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  message = 'Welcome to Angular 17 in Programming Fields';  // custom message
}

Now, let’s move to the app.component.html file after that remove the entire HTML element and simply add the below one.

<h2> {{ message }} </h2>

Here, I have rendered the message that is coming from the class component file.

Now, just go to the browser and refresh the application to reflect the updated message on the homepage.

Conclusion

Embarking on the Angular 17 journey is not just an upgrade but an opportunity to elevate your development experience and build cutting-edge web applications. Therefore, embrace the new features, stay connected with the community, and enjoy the journey of crafting modern and efficient Angular applications. In this case, Angular 17, is an exciting venture into the latest and most powerful features of this robust framework.