Skip to content

Instantly share code, notes, and snippets.

@park-brian

park-brian/index.html

Last active November 4, 2025 23:37
Show Gist options
  • Save park-brian/29c37ae5fb09d7c72fbbbd1bbab1e7f9 to your computer and use it in GitHub Desktop.
Save park-brian/29c37ae5fb09d7c72fbbbd1bbab1e7f9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular 20</title>
<script type="importmap">
{
"imports": {
"@angular/core": "https://cdn.jsdelivr.net/npm/@angular/core@20/fesm2022/core.mjs",
"@angular/core/primitives/signals": "https://cdn.jsdelivr.net/npm/@angular/core@20/fesm2022/primitives/signals.mjs",
"@angular/core/primitives/event-dispatch": "https://cdn.jsdelivr.net/npm/@angular/core@20/fesm2022/primitives/event-dispatch.mjs",
"@angular/core/primitives/di": "https://cdn.jsdelivr.net/npm/@angular/core@20/fesm2022/primitives/di.mjs",
"@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/platform-browser@20/fesm2022/platform-browser.mjs",
"@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/compiler@20/fesm2022/compiler.mjs",
"@angular/common": "https://cdn.jsdelivr.net/npm/@angular/common@20/fesm2022/common.mjs",
"@angular/common/http": "https://cdn.jsdelivr.net/npm/@angular/common@20/fesm2022/http.mjs",
"@angular/router": "https://cdn.jsdelivr.net/npm/@angular/router@20/fesm2022/router.mjs",
"rxjs": "https://cdn.jsdelivr.net/npm/rxjs@7/+esm",
"rxjs/operators": "https://cdn.jsdelivr.net/npm/rxjs@7/operators/+esm"
}
}
</script>
</head>
<body>
<app-root></app-root>
<script type="module">
import "@angular/compiler"; // Required for JIT
import { Component, signal, provideZonelessChangeDetection } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser";
import { RouterLink, RouterOutlet, provideRouter, withHashLocation } from "@angular/router";
const _decorate = (fns, target) => fns.reduceRight((result, fn) => fn(result) || result, target);
export const RootComponent = _decorate(
[
Component({
selector: "app-root",
imports: [RouterLink, RouterOutlet],
template: `
<nav>
<a routerLink="">Home</a> |
<a routerLink="about">About</a>
</nav>
<router-outlet></router-outlet>
`,
}),
],
class {}
);
export const HomeComponent = _decorate(
[
Component({
selector: "app-home",
template: `
<h1>{{ title }}</h1>
<button (click)="updateMessage()">
{{ message }}
</button>
`,
}),
],
class {
title = "Hello Angular 20!";
message = "Click Me!";
updateMessage() {
this.message = "No build step needed!";
}
}
);
export const AboutComponent = _decorate(
[
Component({
selector: "app-about",
template: `<h2>About Page</h2><p>This is the about page.</p>`,
}),
],
class {}
);
const routes = [
{ path: "", title: "Home", component: HomeComponent },
{ path: "about", title: "About", component: AboutComponent },
];
const providers = [provideZonelessChangeDetection(), provideRouter(routes, withHashLocation())];
const appRef = await bootstrapApplication(RootComponent, { providers });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment