Getting Started with Angular: Installing the Latest Version from Scratch

If you’re new to Angular and want to get started with the latest version, you’re in the right place! This guide will walk you through every step to install Angular from scratch.

What You’ll Need

  1. Node.js (includes npm): Node Package Manager (npm) is necessary for installing Angular and its dependencies.
  2. A code editor: Visual Studio Code is popular and free, but feel free to use any editor you prefer.

Step 1: Install Node.js and npm

Angular requires Node.js and npm. Here’s how to get them:

  1. Go to the Node.js website: https://nodejs.org/
  2. Download and install Node.js: Choose the “LTS” version (recommended for most users).
  3. Verify the installation: Open a terminal (Command Prompt on Windows, Terminal on macOS or Linux) and type:
    node -v
    If Node.js is installed, it will show a version number.
    Next, check for npm:
    npm -v
    You should see a version number if npm is installed.

Tip: npm comes with Node.js, so installing Node.js automatically installs npm.

Step 2: Install the Angular CLI

Angular CLI (Command Line Interface) is a tool to manage Angular projects, create new applications, and run them.

  1. Open your terminal.
  2. Run the following command to install the Angular CLI globally:
    npm install -g @angular/cli

Note: Adding -g installs Angular CLI globally, meaning you can use it from any location on your computer. And most probably you need “sudo” permission to do it.

  1. Verify the installation:
    ng version
    This command should show the Angular CLI version if it’s installed correctly.

Step 3: Create a New Angular Project

Now that the Angular CLI is set up, let’s create a new Angular project.

  1. Choose a location in your terminal where you want to create the project.
  2. Run the following command:
    ng new my-first-angular-app
  3. Follow the prompts:
    • Angular will ask if you’d like to add Angular routing. Type y (for “yes”) if you want to use routing (you can add it later if you’re not sure).
    • Then, select CSS as your preferred stylesheet format (you can choose another option, but CSS is the most common).

Angular will generate a new project with the necessary files and folders.

Step 4: Navigate to Your Project and Start the Development Server

  1. Navigate into your new project directory:
    cd my-first-angular-app
  2. Start the Angular development server:
    ng serve
    or
    npm start
    These commands compile the app and launches a local server.
  3. Open your browser and go to http://localhost:4200.
    You should see the default Angular welcome page.

Tip: The Angular development server automatically reloads the page when you make changes to the code.

Step 5: Explore the Project Structure

Here are a few important files and folders to be aware of:

  • src/app: This folder contains all of your application’s code.
  • src/app/app.component.ts: This file contains the main component of the application.
  • src/app/app.module.ts: This file declares which components are part of your app.
  • angular.json: This configuration file tells Angular how to build and serve your project.

Next Steps

Now that you’ve successfully installed Angular, you can start building components, services, and other features that make Angular a powerful framework for creating dynamic web applications. Here are a few ideas for what to learn next:

  • Components: Understand how Angular components work.
  • Routing: Set up navigation between different parts of your app.
  • Services and Dependency Injection: Learn how to manage data across your application.

Happy coding! Remember, practice is key, and don’t hesitate to reach out with questions as you learn.