Getting Started With Angular: Understanding the Basics

Prerequisites

• Basic Knowledge of HTML, CSS
• Understanding of TypeScript
• Node.js and npm installed on your system

Angular CLI Installation

When considering Angular installation, you have two options: global and local installation.

Global vs local installation

The global installation allows you to access the Angular CLI (Command Line Interface) commands from any directory in your system, making it convenient for quickly scaffolding new projects or generating components.

With local installation, Angular is installed within a specific project folder, allowing you to create multiple projects in different directories. Each project has its own version and dependencies managed independently, simplifying collaboration and ensuring that projects remain self-contained and consistent in their environments.

Global installation

npm install -g @angular/cli

Local installation

npm install @angular/cli

Create a new Angular project

Replace <project_name> with the name of your project.

ng new <project_name>

If Angular CLI is installed locally, create a new Angular project by running:

npx ng new <project_name>

Development server

The development server allows you to preview the application in a web browser, enabling you to see how your changes affect the appearance and functionality of the application in real-time.

Understanding the Role of Development Servers in Frontend Web Development

Start the development server

To run the application, you must start the development server. Go to the project directory.

cd <project_name>

Start the server.

npm start

The npm start command will automatically open the default browser and load the Angular app. By default, it runs on http://localhost:4200/.

Mastering Angular: A Step-by-Step Guide to Angular Workspaces, Applications, and Components

Stop the development server

To stop the development server and the running application, you can use the keyboard shortcut Ctrl + C in the terminal or command prompt where the server is running. This will send a signal to terminate the server process and it will stop serving your Angular application.

Restart the development server

To restart the development server, you can follow these steps:

1. If the development server is currently running, stop it by pressing Ctrl + C in the terminal or command prompt where it’s running.
2. Once the server has stopped, you can restart it by typing the following command in the terminal:

npm start

Start the development server with ng serve

ng serve is an Angular CLI command specifically designed to build and serve Angular applications locally during development. When you run ng serve, it compiles the Angular application, bundles it, and starts a development server to serve it on a specified port (usually port 4200 by default). It also watches for changes in your source files and automatically reloads the browser when changes are detected, providing a seamless development experience.

Run the development server

ng serve

In most cases, the npm start command, defined in the package.json file, is configured to run ng serve command.

It’s important to note that npm start can be customized to execute other commands as well.

Conclusion

When you run npm start in the Angular project’s root directory, it looks for a script named start in the scripts section of the package.json file and executes it. In an Angular project, the default start script runs the Angular CLI command ng serve, which starts the development server provided by Angular CLI. This server compiles the Angular application, watches for changes to your source files, and automatically reloads the browser to reflect those changes in real-time as you develop your application.

Mastering Angular: A Step-by-Step Guide to Remove an Angular Application