https://github.com/crutchcorn/new-angular
Reimplementing Angular from scratch for educational purposes
https://github.com/crutchcorn/new-angular
Last synced: about 2 months ago
JSON representation
Reimplementing Angular from scratch for educational purposes
- Host: GitHub
- URL: https://github.com/crutchcorn/new-angular
- Owner: crutchcorn
- Created: 2022-12-08T09:06:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-08T01:18:49.000Z (about 2 years ago)
- Last Synced: 2024-12-25T13:21:40.561Z (6 months ago)
- Language: JavaScript
- Homepage: https://crutchcorn.github.io/new-angular/
- Size: 17.6 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# New Angular
This codebase is a re-implementation of Angular from scratch (no deps) for educational purposes.
While this codebase is incomplete, it's a representation of how [Angular and Zone.js works under-the-hood.](https://unicorn-utterances.com/posts/angular-internals-zonejs)
## Example
```typescript
import {BaseComponent, Application} from './new-angular/index.js';
import {setTimeoutPatch} from './new-zonejs/patch-settimeout.js';
import {queueMicrotaskPatch} from "./new-zonejs/patch-queue-microtask.js";
import {addEventListenerPatch} from "./new-zonejs/patch-event-listener.js";
setTimeoutPatch();
queueMicrotaskPatch();
addEventListenerPatch();
class MyComponent extends BaseComponent {
constructor() {
super("MyComponent");
}
count = 0;
updateCount = () => {
this.count++;
}
templateStr = `The count is: {{count}}!`;
}
const app = new Application();
const component = app.createComponent(new MyComponent());
app.run(component);
// Change the state of the component and trigger-CD:
component.count += 1;
app.tick();
/* ---- OR ---- */
setTimeout(() => {
component.count += 1;
});
```
## Parts of the Code
This codebase is broken into a few different components:
- [Naive implementation of Zone.js](./new-zonejs/index.js)
- [Naive implementation of Zone.js patches (like setTimeout)](./new-zonejs/patch-settimeout.js)
- [Naive implementation of Angular's compiler](./new-angular/compiler.js)
- [Naive implementation of Angular's renderer, change detection, etc](./new-angular/index.js)
> Want to see more like this? [Read through my "Framework Field Guide" book series](https://framework.guide) which will teach you how to write React, Angular, and Vue from scratch.