Setting Up An Angular Project
Tags: angular, frontend, html, typescript
Published: 2024-05-29 11:58:05

## Table of Contents
- [Introduction] (#intro)
- [Prerequisites] (#pre-requisites)
- [Install Angular CLI] (#angular-cli)
- [Create a New Angular Project] (#angular-project)
- [Go to Your Project Directory] (#project-directory)
- [Project Structure Overview] (#project-structure)
- [Building the Project for Production] (#prod)
- [Conclusion] (#conclusion)

<a id= "intro"></a>
## Introduction
Angular is a popular front-end framework for building dynamic web applications. It uses typescript by default for creating logics and methods for a class but the browser doesn’t know typescript.

Setting up an Angular project from scratch can be a task, especially for beginners. here, the Angular Command Line Interface (CLI) comes into picture, serving as a powerful tool to streamline the project setup process and enhance developer productivity. Webpack is used to compile these typescript files to JavaScript. In addition, there are so many configuration files you will need to run an angular project on your computer.

<a id= "pre-requisites"></a>
## Prerequisites
Before you begin, make sure you have the following installed:

- **Node.js:**
 Angular requires Node.js for the development environment. You can download and install it from [nodejs website](https://nodejs.org/en).

- **npm** (Node Package Manager): It comes with Node.js, so if you have Node.js installed, you should have npm as well.
You can verify the installation by running the following commands in your terminal:

```bash
node --version
npm --version
```
<a id= "angular-cli"></a>
## Install Angular CLI
Angular CLI (Command Line Interface) is a powerful tool that helps you create and manage Angular projects. Install it globally using npm:
```bash
npm install -g @angular/cli
```
<a id= "angular-project"></a>
## Create a New Angular Project
Use Angular CLI to create a new project. Open your terminal and run:
```bash
ng new my-angular-app
```

- Replace `my-angular-app` with your desired project name.

- You'll be prompted to answer a few questions about your project setup, such as whether to include Angular routing and which stylesheets format to use (CSS, SCSS, etc.).
![Angular setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0w4mv8p9vkivlzjbu99.PNG)
<a id= "project-directory"></a>
**4. Go to Your Project Directory**
After the project is created, navigate into the project directory:
```bash
cd my-angular-app
```
**Run server and see your application in action**
```bash
ng serve
```

- By default, the application will be served at http://localhost:4200/.

- Open your web browser and navigate to http://localhost:4200/ to see your new Angular application running.
![Angular application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt0v0p2mjdbxmaqxjce5.PNG)
**Note:** If you need to change the port, for example, because another application is using the default port, you can run:

```bash
ng serve --port desiredPort
```
For instance:
```bash
ng serve --port 3200
```
This will serve the application on http://localhost:3200/.
<a id= "project-structure"></a>
## Project Structure Overview
Here's a brief overview of the main folders and files in your Angular project:
![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n69vr0r4lznbdh043lev.PNG)
**- node_modules/:** Contains all the npm packages installed for your project.

**- src/:** Contains the source code of your application.
app/: Main app directory where your components, services, and other parts of your application reside.

**- app.component.*:** Main component files (HTML, CSS, TypeScript, and spec file for testing).

**- assets/:** For static assets like images.

**- environments/:** For environment-specific configurations.
When you create a new Angular project, the `src/environments/` directory contains two files by default:

- environment.ts: Used for development settings.

```typescript
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
};
```
- environment.prod.ts: Used for production settings.

```typescript
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com',
};
```
In these examples:
- production: A boolean indicating if the environment is production.
- apiUrl: The base URL for API requests.

**- angular.json:** Configuration file for Angular CLI.

**- package.json:** This file stores the information about the libraries added and used in the project with their specified version installed. Whenever a new library is added to the project it’s name and version is added to the dependencies in package.json.
**Modifying the App Component**
You can start modifying the default component to get a feel of how Angular works. Open `src/app/app.component.html` and change the content to:
```html
<h1>Welcome to My Angular App!</h1>
<div>
    <p>
        This is my First Angular app.
    </p>
</div>
```
Save the file, and your changes should automatically be reflected in the browser.
![modify Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2415nkpntga7w36p66l.PNG)
**Adding a New Component**
Create a new component using Angular CLI. For example, to create a `hello-world component` :
```bash
ng generate component hello-world
```
This command will create a new folder hello-world in the `src/app` directory with the component files.
Inside the hello-world folder, Angular CLI generates four files:

- hello-world.component.css: The CSS file containing the component's styles.
- hello-world.component.html: The HTML file containing the component's template.
- hello-world.component.spec.ts: The TypeScript file for unit testing the component.
- hello-world.component.ts: The TypeScript file containing the component class.

**Using the New Component**
To use the new hello-world component, add its selector tag to `app.component.html`:
```html
<h1>Welcome to My Angular App!</h1>
<div>
    <p>
        This is my First Angular app.
    </p>
</div>
<app-hello-world></app-hello-world>
```
Open `src/app/hello-world/hello-world.component.html` and add some content to it, like:
```html
    <p>
        Hello, World!.
    </p>
```
Save the files and see the changes in your browser.
![New Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otxre386kr8xeiz59es5.PNG)
<a id='prod'></a>
## Building the Project for Production
To build the project for production, run:
```bash
ng build --prod
```
This will create a `dist/` directory with the production-ready files.
![Angular Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7h60eybtbj0mup4z4xr.PNG)
Building your Angular project for production with `ng build --prod` prepares your application for deployment
<a id='conclusion'></a>
## Conclusion
In this article, you've successfully set up an Angular project and created a new component. From here, you can start building more complex features and exploring Angular's capabilities. Whether you're adding new components, integrating services, or enhancing your application's performance, Angular provides a robust framework to help you achieve your goals.

Here is the [GitHub repository](https://github.com/Reliable25/New-Angular-App) for this article in case you need to check it out. Lastly, if you have found value in this article, please consider sharing it with your peers who may also benefit from it.

What are your thoughts on the topic "Setting Up An Angular Project"? Feel free to share your thoughts in the comments section below.

Happy coding!