Master Angular 20: A Beginner’s Guide to Introduction, Setup, and Creating Your First Project

Introduction & SetupAngular is a powerful, open-source web application framework developed and maintained by Google. It’s designed to build dynamic, single-page applications (SPAs) with a focus on scalability, maintainability, and developer productivity. This module introduces Angular, its core concepts, version history, setup process, and project structure, guiding you through creating and running your first Angular application.

---

1. What is Angular?Framework vs. LibraryAngular is a framework, not a library, and understanding the distinction is key to grasping its role in web development.

• Framework: A framework provides a complete, structured environment for building applications. It dictates the architecture, provides predefined patterns, and often enforces a specific way of doing things (convention over configuration). Angular is a full-fledged framework that includes tools for routing, forms, HTTP requests, dependency injection, and more, all integrated into a cohesive system. It offers a “batteries-included” approach, meaning developers get a comprehensive set of tools to build complex applications without needing to piece together multiple libraries.
• Library: A library, like React or Vue.js (in its lighter forms), is a collection of reusable functions or components that developers can use as needed. Libraries offer more flexibility but require developers to make more architectural decisions and integrate additional tools for a complete solution. For example, React focuses primarily on the view layer, leaving routing, state management, and other concerns to third-party libraries like React Router or Redux.

Angular’s framework nature makes it ideal for large-scale, enterprise applications where consistency and structure are critical. It enforces a standardized way of organizing code, which can reduce decision fatigue and improve team collaboration. However, this comes at the cost of a steeper learning curve compared to lightweight libraries.Single-Page Application (SPA) ConceptAngular is primarily used to build Single-Page Applications (SPAs), a modern approach to web development.

• What is an SPA? An SPA is a web application that loads a single HTML page and dynamically updates its content as the user interacts with it, without requiring full page reloads. The browser initially downloads the HTML, CSS, and JavaScript, and subsequent interactions (e.g., navigating between views or fetching data) are handled via JavaScript, typically through API calls to a backend server.
• How Angular Implements SPAs:
  • Client-Side Rendering: Angular handles rendering on the client side, using JavaScript to manipulate the DOM dynamically. When a user navigates within an Angular app, the framework updates the view by swapping components in the DOM, rather than fetching new HTML pages from the server.
  • Routing: Angular’s router enables navigation between different “pages” (actually views or components) without reloading the entire page. For example, clicking a link might load a new component into the current view while keeping the application shell (e.g., header, footer) intact.
  • Data Fetching: SPAs often communicate with backend APIs (e.g., REST or GraphQL) to fetch or send data asynchronously, typically using Angular’s HttpClient module.
  • Benefits of SPAs:
    • Smooth User Experience: No page reloads result in faster, more fluid interactions, mimicking the feel of a desktop or mobile app.
    • Efficient Resource Usage: After the initial load, only data (e.g., JSON) is exchanged with the server, reducing bandwidth usage.
    • Modular Development: Angular’s component-based architecture allows developers to build reusable, self-contained pieces of UI.
  • Trade-offs:
    • Initial Load Time: SPAs can have slower initial load times due to the need to download JavaScript bundles.
    • SEO Challenges: Since content is rendered client-side, search engine optimization (SEO) requires additional techniques like server-side rendering (SSR) or prerendering, which Angular supports via Angular Universal.
    • Complexity: SPAs require more client-side logic, which can increase development complexity compared to traditional multi-page applications (MPAs).

Angular’s SPA capabilities make it suitable for applications like dashboards, e-commerce platforms, or content management systems, where dynamic, interactive user experiences are paramount.

---

2. Angular Version HistoryAngular has evolved significantly since its inception, with major changes in architecture, performance, and developer experience. Below is an overview of its version history, focusing on key milestones, the introduction of the Standalone API in Angular 14+, and improvements in Angular 20.Angular Version Timeline

1. AngularJS (2010–2016):
   • The original version, known as AngularJS, was released in 2010. It was a JavaScript-based framework that introduced two-way data binding and dependency injection to web development.
   • Limitations: AngularJS was tightly coupled to the DOM, had performance issues with large applications, and lacked TypeScript support, making it less suitable for modern, large-scale apps.
   • AngularJS is still maintained for legacy applications but is no longer the focus of active development.
2. Angular 2 (2016):
   • Angular 2 was a complete rewrite, dropping the “JS” suffix and adopting TypeScript as its primary language. It introduced a component-based architecture, improved performance, and a modern approach to building SPAs.
   • Breaking Change: Angular 2 was not backward-compatible with AngularJS, requiring significant migration efforts.
   • Key Features: Component-based design, hierarchical dependency injection, and a new change detection mechanism.
3. Angular 4–13 (2017–2021):
   • Angular adopted semantic versioning, releasing major updates roughly every six months. Odd-numbered versions (e.g., Angular 3) were skipped to align with dependencies like the Angular Router.
   • Key Improvements:
     • Angular 4: Smaller bundle sizes, improved ngIf syntax, and animation enhancements.
     • Angular 6: Introduction of Angular CLI improvements, ng update for easier upgrades, and the providedIn syntax for services.
     • Angular 8: Ivy renderer (preview), differential loading for modern browsers, and improved lazy loading.
     • Angular 9: Ivy as the default renderer, improving bundle size and runtime performance.
     • Angular 12: Deprecation of View Engine, stricter TypeScript integration, and tailwind CSS support.
     • Angular 13: Removal of legacy View Engine, full transition to Ivy, and improved build performance.
4. Angular 14 (June 2022) – Introduction of Standalone API:
   • Standalone Components: Angular 14 introduced the Standalone API, allowing developers to create components, directives, and pipes without declaring them in an NgModule. This was a significant shift toward simplifying Angular’s architecture.
     • Why Standalone API?
       • Reduced Boilerplate: NgModules (introduced in Angular 2) required developers to declare components, import modules, and manage dependencies in a centralized module file (app.module.ts). This could become cumbersome in large applications.
       • Simplified Development: Standalone components are self-contained, making it easier to create, test, and reuse them without module dependencies.
       • Improved Tree-Shaking: Standalone components allow better tree-shaking (removing unused code), reducing bundle sizes.
       • Future-Proofing: The Standalone API aligns with Angular’s long-term vision of making NgModules optional, streamlining the framework for modern development practices.
     • Usage: A standalone component is marked with standalone: true in its decorator and can directly import other standalone components or modules.
       typescript

       @Component({
         standalone: true,
         selector: 'app-example',
         template: `<p>Hello, Angular!</p>`,
         imports: [CommonModule]
       })
       export class ExampleComponent {}

     • Adoption: In Angular 14, the Standalone API was experimental, but it gained stability in later versions, becoming the recommended approach for new projects by Angular 17+.
5. Angular 15–19 (2022–2024):
   • Angular 15: Stabilized Standalone API, introduced NgOptimizedImage for better image handling, and improved stack traces for debugging.
   • Angular 16: Enhanced server-side rendering with hydration support, signal-based reactivity (preview), and better TypeScript 4.9+ support.
   • Angular 17: Full adoption of Standalone API as the default for new projects, deferrable views for lazy loading, and improved build performance with esbuild and Vite (experimental).
   • Angular 18: Improved hydration for SSR, signal-based components becoming stable, and enhanced developer tooling.
   • Angular 19: Continued refinements to signals, better integration with modern JavaScript ecosystems, and improved performance for large-scale apps.
6. Angular 20 (2025):
   • As of August 16, 2025, Angular 20 is the latest version, building on the foundation of previous releases. Key improvements include:
     • Stable Signals: Angular’s signal-based reactivity system, introduced as a preview in Angular 16, is now fully stable. Signals provide a fine-grained, reactive state management system, reducing reliance on RxJS for certain use cases and improving performance.
       typescript

       import { signal } from '@angular/core';
       @Component({...})
       export class MyComponent {
         count = signal(0);
         increment() {
           this.count.update(value => value + 1);
         }
       }

     • Enhanced SSR and Hydration: Angular 20 improves server-side rendering with non-destructive hydration, reducing flicker and improving performance for SPAs with SSR.
     • Improved Standalone API: Standalone components, directives, and pipes are now the default, with NgModules fully optional. This simplifies project setup and reduces boilerplate.
     • Zoneless Change Detection (Experimental): Angular 20 introduces experimental support for zoneless change detection, reducing the need for Zone.js in some scenarios, which can improve performance by minimizing overhead.
     • Better Tooling: Integration with modern build tools like esbuild and Vite is now stable, offering faster builds and better developer experience.
     • TypeScript 5.x Support: Angular 20 supports the latest TypeScript versions, enabling stricter type checking and modern JavaScript features.
     • Improved Accessibility: Enhanced tools for building accessible applications, including better ARIA support and automated accessibility checks in the Angular CLI.
     • Performance Optimizations: Continued focus on reducing bundle sizes, improving runtime performance, and optimizing initial load times for SPAs.

Why Standalone API in Angular 14+?The Standalone API was introduced to address pain points in Angular’s NgModule-based architecture:

• Complexity: NgModules required developers to manage imports, declarations, and providers in a centralized file, which could become unwieldy in large projects.
• Learning Curve: New developers often struggled with understanding NgModule dependencies and their role in Angular’s architecture.
• Scalability: Standalone components make it easier to create micro-frontends or shareable libraries, as they don’t rely on a parent module.
• Alignment with Modern Frameworks: Other frameworks like React and Vue.js have simpler, component-centric models. The Standalone API brings Angular closer to this paradigm, making it more approachable.

By Angular 20, the Standalone API is the preferred way to build applications, with NgModules retained only for backward compatibility or legacy projects.

---

3. Install Node.js & Angular CLITo start developing with Angular, you need to set up your development environment by installing Node.js and the Angular CLI.Step 1: Install Node.jsNode.js is a JavaScript runtime that allows you to run JavaScript outside the browser. It includes npm (Node Package Manager), which is used to install Angular CLI and other dependencies.

1. Download Node.js:
   • Visit the official Node.js website: nodejs.org.
   • Download the LTS (Long-Term Support) version (recommended for stability). As of August 2025, the latest LTS version is likely 20.x or higher.
   • Installers are available for Windows, macOS, and Linux.
2. Install Node.js:
   • Run the installer and follow the prompts. Ensure the option to install npm is selected.
   • On Linux, you can use a package manager like apt or yum, or use nvm (Node Version Manager) for more control:
     bash

     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
     nvm install --lts

3. Verify Installation:
   • Open a terminal and run:
     bash

     node -v
     npm -v

   • You should see version numbers (e.g., v20.17.0 for Node.js and 10.x.x for npm).

Step 2: Install Angular CLIThe Angular CLI (Command Line Interface) is a powerful tool for creating, building, and managing Angular projects.

1. Install Angular CLI Globally:
   • Run the following command in your terminal:
     bash

     npm install -g @angular/cli

   • The -g flag installs the CLI globally, making the ng command available system-wide.
   • As of August 2025, this installs the latest Angular CLI version compatible with Angular 20 (e.g., @angular/cli@20.x.x).
2. Verify Installation:
   • Check the installed version of Angular CLI:
     bash

     ng version

   • This command displays:
     • Angular CLI version.
     • Node.js version.
     • Other dependencies like TypeScript, RxJS, and Angular core packages.
     • Example output:
       Angular CLI: 20.0.0
       Node: 20.17.0
       Package Manager: npm 10.8.2
       OS: win32 x64
       Angular: 20.0.0
       ... animations, common, compiler, compiler-cli, core, forms
       ... platform-browser, platform-browser-dynamic, router

---

4. Creating Your First Angular ProjectWith Node.js and Angular CLI installed, you can create a new Angular project using the ng new command.Step 1: Create a New Project

1. Open a terminal and navigate to the directory where you want to create your project.
2. Run:
   bash

   ng new my-first-angular-app

3. The CLI prompts you with options:
   • Would you like to add Angular routing? Select Yes if you plan to use routing (recommended for SPAs).
   • Which stylesheet format would you like to use? Choose a format like CSS, SCSS, Sass, or Less. SCSS is popular for its advanced features.
   • Example:
     ? Would you like to add Angular routing? Yes
     ? Which stylesheet format would you like to use? SCSS

4. The CLI creates a new directory (my-first-angular-app), installs dependencies, and sets up a default project structure.

Step 2: Navigate to the Project

bash

cd my-first-angular-app

---

5. Project Structure ExplainedThe ng new command generates a standardized project structure. Below is an overview of the key files and folders, focusing on the src/app directory and critical entry points.Project Root

• angular.json: The configuration file for the Angular CLI. It defines build, serve, and test settings, including project metadata, output paths, and asset configurations.
• package.json: Lists project dependencies (e.g., @angular/core, @angular/cli) and scripts (e.g., ng serve, ng build).
• tsconfig.json: TypeScript configuration file, specifying compiler options like target ES version and module resolution.
• src/: The main source folder containing the application code.

The src/ FolderThe src/ folder is where you’ll spend most of your time developing. Key subfolders and files include:src/app/This folder contains the core application code, including components, services, and routing configuration.

• app.component.ts: The root component of the application, serving as the entry point for the app’s component tree.
  • Structure:
    typescript

    import { Component } from '@angular/core';
    @Component({
      standalone: true,
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      title = 'my-first-angular-app';
    }

  • Explanation:
    • The @Component decorator marks the class as an Angular component.
    • selector: Defines the HTML tag (<app-root>) used to include the component in templates.
    • templateUrl: Points to the component’s HTML template.
    • styleUrls: Links to the component’s CSS/SCSS styles.
    • standalone: true: Indicates this is a standalone component (Angular 14+).
• app.component.html: The template file for the root component, defining its HTML structure.
  • Default content:
    html

    <h1>{{ title }}</h1>
    <router-outlet></router-outlet>

  • The <router-outlet> directive is a placeholder where routed components are rendered.
• app.component.scss: The stylesheet for the root component, initially empty.
• app.routes.ts (if routing is enabled):
  • Defines the application’s routes using Angular’s router.
  • Example:
    typescript

    import { Routes } from '@angular/router';
    export const routes: Routes = [];

  • You can add routes to map URLs to components, e.g.:
    typescript

    import { HomeComponent } from './home/home.component';
    export const routes: Routes = [
      { path: '', component: HomeComponent }
    ];

src/main.tsThis is the entry point of the Angular application, responsible for bootstrapping the app.

• Content:
  typescript

  import { bootstrapApplication } from '@angular/platform-browser';
  import { appConfig } from './app/app.config';
  import { AppComponent } from './app/app.component';
  bootstrapApplication(AppComponent, appConfig)
    .catch((err) => console.error(err));

• Explanation:
  • bootstrapApplication: A function introduced in Angular 14+ for standalone components, replacing the older bootstrapModule approach.
  • AppComponent: The root component to bootstrap.
  • appConfig: Configuration object (defined in app.config.ts) for providers like routing or HTTP services.
  • The main.ts file is executed when the application starts, initializing the Angular runtime.

src/app/app.config.tsThis file defines application-wide providers, especially for standalone applications.

• Content:
  typescript

  import { ApplicationConfig } from '@angular/core';
  import { provideRouter } from '@angular/router';
  import { routes } from './app.routes';
  export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes)]
  };

• Explanation:
  • provideRouter: Sets up the router with the routes defined in app.routes.ts.
  • Other providers (e.g., for HTTP, animations) can be added here.

Other Key Files in src/

• index.html: The main HTML file loaded by the browser. It includes the <app-root> tag where the Angular app is mounted.
  html

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyFirstAngularApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>

• styles.scss: Global styles for the application, applied to all components unless overridden.
• assets/: Folder for static assets like images, fonts, or JSON files.
• environments/: Contains environment-specific configuration files (e.g., environment.ts for development, environment.prod.ts for production).

---

6. Running the ApplicationTo see your Angular application in action, use the ng serve command.

1. Run the Development Server:
   bash

   ng serve -o

   • ng serve: Starts a development server with live reloading, compiling TypeScript and SCSS on the fly.
   • -o: Automatically opens the application in your default browser.
   • The app runs at http://localhost:4200 by default.
2. What Happens:
   • The Angular CLI compiles the TypeScript code to JavaScript.
   • It bundles the application using esbuild (Angular 17+) or Webpack (older versions).
   • The development server watches for file changes and reloads the browser automatically.
   • You should see the default Angular welcome page with the title “my-first-angular-app”.
3. Stopping the Server:
   • Press Ctrl+C in the terminal to stop the server.

---

SummaryThis module introduced Angular as a framework for building SPAs, contrasting it with libraries and explaining its version history, including the pivotal Standalone API in Angular 14+ and enhancements in Angular 20. You learned how to set up Node.js and Angular CLI, create a new project with ng new, and understand the project structure, focusing on src/app, main.ts, app.routes.ts, and app.component.ts. Finally, you ran the application using ng serve -o.