Setting Up An Angular Project

Table of Contents

• Introduction
• Prerequisites
• Install Angular CLI
• Create a New Angular Project
• Go to Your Project Directory
• Project Structure Overview
• Building the Project for Production
• Conclusion

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.

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.

• 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:
  

node --version
npm --version

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:

npm install -g @angular/cli

Create a New Angular Project

Use Angular CLI to create a new project. Open your terminal and run:

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.).
  
  
  4. Go to Your Project Directory
  After the project is created, navigate into the project directory:
  

cd my-angular-app

Run server and see your application in action

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.
  
  Note: If you need to change the port, for example, because another application is using the default port, you can run:
  

ng serve --port desiredPort

For instance:

ng serve --port 3200

This will serve the application on http://localhost:3200/.

Project Structure Overview

Here's a brief overview of the main folders and files in your Angular project:

- 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.

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
};

• environment.prod.ts: Used for production settings.

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:

<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.

Adding a New Component
Create a new component using Angular CLI. For example, to create a hello-world component :

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:

<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:

    <p>
        Hello, World!.
    </p>

Save the files and see the changes in your browser.

Building the Project for Production

To build the project for production, run:

ng build --prod

This will create a dist/ directory with the production-ready files.

Building your Angular project for production with ng build --prod prepares your application for deployment

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 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!