Skip to content

Instantly share code, notes, and snippets.

@yjaaidi
Last active June 11, 2022 14:22
Show Gist options
  • Save yjaaidi/712c075b090b73697fcf71951f9e1092 to your computer and use it in GitHub Desktop.
Save yjaaidi/712c075b090b73697fcf71951f9e1092 to your computer and use it in GitHub Desktop.
Tiniest Angular Setup Ever
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>👨🏻‍🍳🅰️ Ngx Light by Younes @ Marmicode.io</title>
<meta name="description" content="👨🏻‍🍳🅰️ Ngx Light" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="importmap">
{
"imports": {
"@angular/common": "https://unpkg.com/@angular/common@14.0.1/fesm2020/common.mjs",
"@angular/compiler": "https://unpkg.com/@angular/compiler@14.0.1/fesm2020/compiler.mjs",
"@angular/core": "https://unpkg.com/@angular/core@14.0.1/fesm2020/core.mjs",
"@angular/platform-browser": "https://unpkg.com/@angular/platform-browser@14.0.1/fesm2020/platform-browser.mjs",
"rxjs": "https://unpkg.com/@esm-bundle/rxjs@7.5.5/esm/es2015/rxjs.min.js",
"rxjs/operators": "https://unpkg.com/@esm-bundle/rxjs@7.5.5/esm/es2015/rxjs-operators.min.js",
"zone.js": "https://unpkg.com/zone.js@0.11.5/fesm2015/zone.min.js"
}
}
</script>
</head>
<body>
<mc-app></mc-app>
<script type="module">
import 'zone.js';
import '@angular/compiler';
</script>
<script type="module">
import { inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { timer, map } from 'rxjs';
import { Component, Injectable } from '@angular/core';
// @todo switch to decorators the days ES decorators land
// https://github.com/tc39/proposal-decorators
export function defineComponent(componentDef) {
const { component = class {}, ...rest } = componentDef;
return Component({
standalone: true,
...rest,
})(component);
}
export function defineInjectable(injectable, options) {
return Injectable(options)(injectable);
}
const NowService = defineInjectable(
class {
now$ = timer(0, 100).pipe(map(() => new Date()));
},
{ providedIn: 'root' }
);
const Counter = defineComponent({
selector: 'mc-counter',
template: `
<div>{{count}}</div>
<button [disabled]="count === 0" (click)="count = count - 1">-</button>
<button (click)="count = count + 1">+</button>
`,
component: class {
count = 0;
},
});
const Demo = defineComponent({
selector: 'mc-demo',
imports: [CommonModule],
template: `
<img [src]="pictureUrl">
<div>{{ now$ | async | date:'HH:mm:ss' }}</div>
`,
component: class {
pictureUrl =
'https://marmicode.io/f3683922cdecc8b0642e4ab8f8f1d35e.gif';
now$ = inject(NowService).now$;
},
});
const App = defineComponent({
selector: 'mc-app',
imports: [Counter, Demo],
template: `
<mc-demo></mc-demo>
<mc-counter></mc-counter>
<a href="https://twitter.com/yjaaidi" target="_blank">🐦 @yjaaidi</a>
`,
styles: [
`:host {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}`,
],
});
bootstrapApplication(App);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment