Getting Started with Angular

Angular Step by Step Guide for Beginners

Angular is a powerful Typescript-based framework that developed by Google for building scalable single-page applications (SPAs).

It provides a structured approach to web development with features like two-way data binding, dependency injection, and component-based architecture.

Setting Up Angular:

To start, install Angular CLI (Command Line Interface) using Node.js:

npm install -g @angular/cli

Explanation: The command npm install -g @angular/cli is used to globally install the Angular CLI (Command Line Interface) on your system using Node Package Manager (NPM). Here’s a breakdown of each part:

• npm: Stands for Node Package Manager, which is a tool used to install, update, and manage JavaScript packages.
• install: This command tells NPM to install a package.
• -g: The -g flag stands for "global," meaning the package will be installed system-wide and accessible from any directory, rather than just within a single project.
• @angular/cli: This is the official package name for the Angular Command Line Interface, which provides various tools to create, build, and manage Angular applications.

After running this command, you can use the ng command globally to create new Angular projects, serve applications, generate components, and perform other Angular development tasks.

Get Janusika Tharmarasa’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Create a new Angular project:

ng new my-angular-app
cd my-angular-app
ng serve

These three commands are used to create, navigate into, and run a new Angular application using the Angular CLI. Let’s break them down:

1. ng new my-angular-app

• This command creates a new Angular project named my-angular-app.
• The Angular CLI sets up the project with the necessary files, directories, and configurations.
• It prompts you for options like routing setup and stylesheet format (CSS, SCSS, etc.).
• After confirming the options, it installs the required dependencies using NPM.

2. cd my-angular-app

• The cd (Change Directory) command moves into the newly created project folder (my-angular-app).
• This ensures that subsequent commands run within the correct project directory.

3. ng serve

• This command compiles and starts a development server for the Angular application.
• By default, the app runs on http://localhost:4200/.
• The development server automatically reloads when you make changes to the source code.

Visit http://localhost:4200/ to see your Angular app in action.

Next: Angular Project Structure