What does it mean that Angular is an 'opinionated' framework?

It has clearly defined rules and project structure

It works only in the Chrome browser

It is free only for large companies

It does not allow writing your own components

Angular course · Module 1: Introduction to Angular

What is Angular?

3 min read · Updated September 30, 2026

In this lesson3

Welcome to the Code Samurai Academy! I am Master Ango-san, and I will be your guide on the path of Angular. Just as a young samurai must learn the history of their clan, you must learn the origins of the framework you will master.

History of Angular - From AngularJS to Angular 19

Angular is a powerful framework created by Google, and its history is as fascinating as tales of legendary warriors.

The AngularJS Era (2010-2016)

In 2010, AngularJS (Angular 1.x) was born - one of the first frameworks that revolutionized web application development. It brought concepts like two-way data binding and dependency injection to the browser.

The Birth of Angular 2+ (2016)

In 2016, Google rewrote the framework from scratch, creating Angular 2. It was like transitioning from a wooden sword to a katana - an entirely new tool, built on TypeScript.

Angular Today (v19+)

Today, Angular (version 19 and newer in this course) is a mature, "opinionated" framework featuring:

Standalone Components - independent warriors, no modules needed
Signals - a reactivity system (since Angular 16, stable since 17), like smoke signals between castles
Zoneless - the future without Zone.js for better performance

Angular Philosophy - The Bushido Code of the Framework

Angular is "opinionated" - it has clearly defined rules and structure, much like the Bushido code for samurai.

Angular Principles:

Structure - every project has a defined organization
TypeScript - typing means discipline and precision
Dependency Injection - the warrior supply system
Components - the basic unit, like an individual samurai

// First Angular component - simple as a greeting in the dojo
import { Component } from '@angular/core';

@Component({
  selector: 'app-dojo',
  standalone: true,
  template: `
    <div class="dojo">
      <h1>道場 Code Dojo</h1>
      <p>Welcome, young warrior: {{ name }}</p>
    </div>
  `
})
export class DojoComponent {
  name = 'Apprentice';
}

Angular vs Other Frameworks

Feature	Angular	React	Vue
Type	Complete framework	Library	Progressive framework
Language	TypeScript (required)	JavaScript/TypeScript	JavaScript/TypeScript
Structure	Strict (opinionated)	Flexible	Flexible
Learning curve	Steep	Medium	Gentle
Best for	Enterprise, large projects	UI, flexibility	Prototypes, mid-size projects

Angular is like traditional samurai training - it demands discipline and time, but provides solid foundations for a programmer's entire career.

Code for this lesson: src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="dojo">
      <header class="dojo-header">
        <h1>Code Samurai Academy</h1>
        <p class="subtitle">道場 Angular Dojo - Module 1</p>
      </header>

      <main class="dojo-content">
        <section class="welcome-panel">
          <h2>Welcome, Young Warrior!</h2>
          <p>
            This is your first Angular component in our Dojo.
            We created it as a Standalone Component - an independent warrior.
          </p>
          <p>
            <strong>Master Ango-san:</strong> "Every great journey begins with a single step.
            Your path of the code samurai has just begun!"
          </p>
        </section>

        <section class="info-panel">
          <h3>What is Angular?</h3>
          <ul>
            <li>Framework by Google</li>
            <li>TypeScript as the foundation</li>
            <li>Standalone Components</li>
            <li>Signals - new reactivity</li>
          </ul>
        </section>

        <section class="counter-demo">
          <h3>Training Counter</h3>
          <div class="counter">
            <button (click)="decrementTraining()" class="btn">-</button>
            <span class="training-display">{{ trainingCount }} trainings</span>
            <button (click)="incrementTraining()" class="btn">+</button>
          </div>
          <p class="status" [class]="getStatusClass()">
            Status: {{ getStatusText() }}
          </p>
        </section>
      </main>

      <footer class="dojo-footer">
        <p>道場 Code Dojo © 2024 - The Angular Samurai Path</p>
      </footer>
    </div>
  `,
  styles: [`
    .dojo {
      font-family: 'Segoe UI', sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      min-height: 100vh;
      color: #eee;
    }

    .dojo-header {
      text-align: center;
      padding: 20px;
      border-bottom: 2px solid #c9a227;
    }

    .dojo-header h1 {
      color: #c9a227;
      margin: 0;
      font-size: 2rem;
    }

    .subtitle {
      color: #888;
      font-style: italic;
    }

    .dojo-content {
      padding: 20px 0;
    }

    .welcome-panel, .info-panel, .counter-demo {
      background: rgba(255,255,255,0.05);
      border: 1px solid #c9a227;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }

    h2, h3 {
      color: #c9a227;
    }

    ul {
      list-style: none;
      padding-left: 0;
    }

    ul li::before {
      content: "» ";
    }

    .counter {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin: 20px 0;
    }

    .btn {
      background: #c9a227;
      color: #1a1a2e;
      border: none;
      width: 40px;
      height: 40px;
      font-size: 1.5rem;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.2s;
    }

    .btn:hover {
      transform: scale(1.1);
    }

    .training-display {
      font-size: 1.5rem;
      min-width: 150px;
      text-align: center;
    }

    .status {
      text-align: center;
      padding: 10px;
      border-radius: 4px;
    }

    .status.beginner { background: #4a5568; }
    .status.intermediate { background: #2d6a4f; }
    .status.advanced { background: #7c3aed; }
    .status.master { background: #c9a227; color: #1a1a2e; }

    .dojo-footer {
      text-align: center;
      padding: 20px;
      border-top: 1px solid #333;
      color: #666;
    }
  `]
})
export class AppComponent {
  trainingCount = 0;

  incrementTraining(): void {
    this.trainingCount++;
  }

  decrementTraining(): void {
    if (this.trainingCount > 0) {
      this.trainingCount--;
    }
  }

  getStatusClass(): string {
    if (this.trainingCount >= 100) return 'master';
    if (this.trainingCount >= 50) return 'advanced';
    if (this.trainingCount >= 10) return 'intermediate';
    return 'beginner';
  }

  getStatusText(): string {
    if (this.trainingCount >= 100) return 'Master!';
    if (this.trainingCount >= 50) return 'Advanced';
    if (this.trainingCount >= 10) return 'Intermediate';
    return 'Beginner';
  }
}

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

1. In which year was Angular 2+ released (rewritten from scratch in TypeScript)?
2. Which company created and maintains the Angular framework?
3. What does it mean that Angular is an 'opinionated' framework?
4. Which of the following is Angular's new reactivity system?

Hands-on tasks in the game

Horizontal ordering
Arrange in one line the correct import of the Component decorator from the Angular library:
Click in order
Click in order to build the start of the component decorator: @Component({})