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.

Development checklist

The idea behind the following checklist is to ensures that all development tasks are properly documented, reviewed, and tested, maintaining a high standard of quality and clarity throughout the project

Guidelines for Development

  • Version Control:
    • Ensure that all changes are pushed to the appropriate branch following the branching strategy.
    • Commit changes regularly and use descriptive commit messages.
    • if it’s a UI change, or a new script, then update release page with the new ui branch to deploy or the script to execute for each env
  • API Integration Documentation in Confluence:
    • Provide a detailed description of any web service integration or Kafka events (see Mandatory Documentation section).
    • Include examples of request payloads and response payloads (see Mandatory Documentation section).
    • Document any callback responses, if applicable (see Mandatory Documentation section).
    • Provide an example of events sent or received, specifying their structure and content (see Mandatory Documentation section).

Code Review

  • Submit Code for Review:
    • Ensure that all implemented features and fixes are submitted for code review through the project’s code review tool.
  • Review Checklist:
    • Check for code efficiency, performance, and readability.
    • Ensure that the code is secure and free of vulnerabilities.
    • Confirm that appropriate test coverage is included (unit tests, integration tests, etc.), and not waiting for testers bugs 🙂
    • Validate that all required documentation has been created or updated in Confluence.
  • Feedback Implementation:
    • Address all feedback received during the code review.
    • Make necessary changes and update the code accordingly.
    • Resubmit the code for further review if required.

Testing and Validation

  • Unit Testing:
    • Create unit tests for all new functions or classes implemented.
    • Ensure that all unit tests pass before marking the task as complete.
  • Integration Testing:
    • Develop integration tests for any new integrations (APIs, services, Kafka events).
    • Confirm that the integration works as expected in the testing environments.
  • End-to-End Testing:
    • Execute end-to-end tests to validate the complete workflow and user interactions.
    • Ensure that all tests pass without errors or issues.

Mandatory Documentation in Confluence

  • API/Web Service Integration:
    • Include a detailed example of a request (JSON or XML format) and the corresponding response.
    • Provide an example of the callback response, if applicable.
    • Document the structure and content of any Kafka events sent or received, including headers and payload.
  • Diagrams:
    • Sequence Diagram: Create at least one sequence diagram to illustrate the interaction flow between different components or services for each user story.
    • Architectural Diagram: Develop an architectural diagram to show the system’s structure, highlighting how the new features or integrations fit into the existing architecture.