Basic example of angular.

2024/12/angular_demo1/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet />

2024/12/angular_demo1/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'angular_demo1' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular_demo1');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular_demo1');
+  });
+});

2024/12/angular_demo1/src/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  title = 'angular_demo1';
+}

2024/12/angular_demo1/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};

2024/12/angular_demo1/src/app/app.routes.ts

@@ -0,0 +1,14 @@
+import {Routes} from '@angular/router';
+import {ItemsComponent} from './components/items.component.spec';
+import {NotFound404Component} from './components/notfound404.component.spec';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: ItemsComponent
+  },
+  {
+    path: '**',
+    component: NotFound404Component
+  }
+];

2024/12/angular_demo1/src/app/components/items.component.html

@@ -0,0 +1,8 @@
+<div>
+  Items:
+  <ul>
+    @for (item of items; track item.id) {
+      <li>{{ item.id }} {{ item.data }}</li>
+    }
+  </ul>
+</div>

2024/12/angular_demo1/src/app/components/items.component.spec.ts

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {Item} from '../models/Item';
+import {ItemsService} from '../services/itemsservice';
+
+@Component({
+  selector: 'items',
+  templateUrl: './items.component.html',
+  styleUrl: './items.component.scss',
+  providers: [ItemsService]
+})
+export class ItemsComponent {
+
+  items: Item[] = [];
+
+  constructor(
+    private itemsService: ItemsService
+  ) {
+  }
+
+  async ngOnInit() {
+    this.items = await this.itemsService.fetchItems();
+  }
+}

2024/12/angular_demo1/src/app/components/notfound404.component.html

@@ -0,0 +1,3 @@
+<div>
+  Not found
+</div>

2024/12/angular_demo1/src/app/components/notfound404.component.spec.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'notfound404',
+  templateUrl: './notfound404.component.html'
+})
+export class NotFound404Component {
+
+}

2024/12/angular_demo1/src/app/models/Item.ts

@@ -0,0 +1,9 @@
+export class Item {
+  id: string;
+  data: string;
+
+  constructor(id: string, data: string) {
+    this.id = id;
+    this.data = data;
+  }
+}

2024/12/angular_demo1/src/app/services/itemsservice.ts

@@ -0,0 +1,15 @@
+import {Injectable} from '@angular/core';
+import {Item} from '../models/Item';
+
+@Injectable()
+export class ItemsService {
+  async fetchItems(): Promise<Item[]> {
+    return Promise.resolve(
+      [
+        new Item("1", "1"),
+        new Item("2", "2"),
+        new Item("3", "3x")
+      ]
+    );
+  }
+}

2024/12/angular_demo1/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AngularDemo1</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

2024/12/angular_demo1/src/main.ts

@@ -0,0 +1,6 @@
+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));

2024/12/angular_demo1/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */