• Stars
    star
    142
  • Rank 258,495 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate a Minecraft/Christmas-like world out of an Angular application.

🌍 ngworld 🌍

This project aims to illustrate how powerful the Angular compiler is by generating a Minecraft-like world out of an Angular application.

The project uses ngast - a library which wraps the Angular compiler and provides user friendly API to it's metadata collector.

Warning: this project is a prototype/demonstration built on top of the Angular compiler. If you're looking for a tool for reverse engineering of Angular applications, you might be interested in ngrev.

How to use

npm i -g ngworld
mkdir world && ngworld -p [PATH_TO_TSCONFIG]
http-server .

🎄 ng-xmas 🎄

Over the weekend, before Christmas 2017, I built ng-xmas. That's variation of the original world which renders an Angular application as Christmas trees 🎄.

The world embeds the following rules:

  • Each garden is an NgModule.
  • Each tree inside of each garden is a component.
  • The crowns of all trees are generated from the components' templates.
    • The template is being flatten after which the ngworld compiler consumes up to 7 elements.
    • If there's at least one directive attached to any of the elements, the toys on this layer of the tree are shown with goldenrod color otherwise they are red.

ngworld uses particle system plugin which performs heavy computations which can dramatically reduce the framerate. In order to prevent this, it's snowing only over a particular region of the world.

How to Install

The Christmas edition of ngworld is published under the ng-xmas package:

npm i -g ng-xmas
mkdir xmas && cd xmas && ng-xmas -p [PATH_TO_TSCONFIG]
http-server .

Code

You can find the code for ng-xmas in the ng-xmas branch.

Demo

Here.

License

MIT

More Repositories

1

javascript-algorithms

💻 JavaScript implementations of computer science algorithms
JavaScript
7,836
star
2

angularjs-style-guide

📚 Community-driven set of best practices for AngularJS application development
4,984
star
3

revive

🔥 ~6x faster, stricter, configurable, extensible, and beautiful drop-in replacement for golint
Go
4,764
star
4

angular-seed

🌱 [Deprecated] Extensible, reliable, modular, PWA ready starter project for Angular (2 and beyond) with statically typed build and AoT compilation
TypeScript
4,572
star
5

angular-performance-checklist

⚡ Cheatsheet for developing lightning fast progressive Angular applications
4,027
star
6

google-interview-preparation-problems

leetcode problems I solved to prepare for my Google interview.
JavaScript
3,124
star
7

codelyzer

Static analysis for Angular projects.
TypeScript
2,446
star
8

angularjs-in-patterns

AngularJS in patterns - this repository provides different look into AngularJS. It contains information where different design patterns are used inside the framework or any Angular application.
JavaScript
1,956
star
9

ngrev

Tool for reverse engineering of Angular applications
TypeScript
1,553
star
10

mk.js

Canvas implementation of basic fighting game which allows multiplayer over the network.
JavaScript
1,504
star
11

angular2-style-guide

[Deprecated] Community-driven set of best practices and style guidelines for Angular 2 application development
1,203
star
12

injection-js

Dependency injection library for JavaScript and TypeScript in 5.1K. It is an extraction of the Angular's ReflectiveInjector which means that it's well designed, feature complete, fast, reliable and well tested.
TypeScript
1,149
star
13

jscapture

Screen recording and capturing with pure client-side JavaScript.
JavaScript
797
star
14

tiny-compiler

A tiny evaluator and compiler of arithmetic expressions.
JavaScript
768
star
15

ngx-quicklink

Quicklink prefetching strategy for the Angular router
TypeScript
749
star
16

guess-next

🔮 Demo application showing the integration of Guess.js with Next.js
JavaScript
526
star
17

aspect.js

JavaScript library for aspect-oriented programming using modern syntax.
TypeScript
474
star
18

angular-webrtc

Demo for my blog post at http://goo.gl/LCOSsI
ApacheConf
307
star
19

switching-to-angular2

TypeScript
285
star
20

memo-decorator

Decorator which applies memoization to a method of a class.
TypeScript
256
star
21

js-vnc-demo-project

Demo project for the class Advanced JavaScript at the department mathematics and informatics in Sofia University.
JavaScript
186
star
22

is-esm

🌳 CLI tool which checks if a package is distributed in ECMAScript module format. Helps you reason if the package is tree-shakable.
JavaScript
184
star
23

angular-immutable

Simple directive, which allows binding to Immutable.js collections.
JavaScript
166
star
24

ngast

Parser for Angular projects.
TypeScript
164
star
25

angular-aop

Library for aspect-oriented programming with AngularJS.
JavaScript
161
star
26

tslint-angular

Recommended tslint configuration for Angular applications.
161
star
27

ngx-hover-preload

🖱 Preload Angular lazy-loaded routes on mouse over
TypeScript
160
star
28

mk-tfjs

Play MK.js with TensorFlow.js
JavaScript
156
star
29

ReactChat

WebRTC chat with ReactJS
JavaScript
153
star
30

scalable-architecture-demo

TypeScript
134
star
31

github-contributors-list

Node.js script, which outputs all the contributors for given open GitHub project
JavaScript
133
star
32

ngresizable

Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (2 and beyond).
TypeScript
117
star
33

angular2-hot-loader

[NOT MAINTAINED] Angular 2 hot loader
TypeScript
115
star
34

light-angularjs

Light AngularJS implementation for my slides "Lightweight AngularJS"
JavaScript
110
star
35

movement.js

Gesture recognition with JavaScript and HTML5.
JavaScript
106
star
36

angular-vnc

VNC client implemented with AngularJS and Yeoman
JavaScript
99
star
37

ngx-tfjs

🤖 TensorFlow.js bindings for Angular
TypeScript
95
star
38

real-world-bazel

The real world Angular example app moved to Bazel
TypeScript
90
star
39

angular-transitions

Pre-defined set of CSS3 transformation which can be used with ng-view, ui-view, ng-repeat, ng-show, ng-hide. Both the 1.1.5 and 1.2.0 APIs are supported.
CSS
90
star
40

angular-tfjs-demo

A demo application with TensorFlow.js bindings for Angular.
TypeScript
85
star
41

angular2-ngc-rollup-build

Simple build for "Hello world!" Angular 2 application with ngc and rollup.
HTML
81
star
42

angular2-github-app-bootstrap

Exercise for building simple Angular 2 apps
JavaScript
79
star
43

blog.mgechev.com

My personal blog.
JavaScript
70
star
44

dotfiles

My dot files.
Shell
67
star
45

react-reorderable

Simple react sortable component (for more advanced cases use react-dnd).
JavaScript
63
star
46

devtools-vnc

VNC client for Chrome Devtools
JavaScript
61
star
47

cli-builders-demo

Demo showing how to develop a builder using the Angular CLI Architect API.
TypeScript
59
star
48

ngx-flamegraph

Flame graph for stack trace visualization written in Angular
TypeScript
57
star
49

electron-typescript-boilerplate

Electron TypeScript starter (intended mostly for personal projects). Fork of https://github.com/szwacz/electron-boilerplate.
JavaScript
54
star
50

angular-ivy-demo

Demo repository showing how ivy allows significant API simplification.
TypeScript
53
star
51

mlx

Data-driven bundling
TypeScript
48
star
52

optimizing-an-angular-application

Code for my ngconf talk "Optimizing an Angular Application".
TypeScript
48
star
53

ngx-gh

Automatic deployments to GitHub pages directly from the Angular CLI 🚀
TypeScript
45
star
54

data-adapter

Data adapter useful in data serialization when talking with external services.
TypeScript
45
star
55

react-pstate

Persistence of the state of ReactJS component
JavaScript
43
star
56

hybrid-rendering

TypeScript
42
star
57

playground

Initial experience with different programming languages
JavaScript
40
star
58

bazel-demo

Simple demo for building a TypeScript project with Bazel.
TypeScript
40
star
59

angular-hybrid-rendering

TypeScript
39
star
60

plainvm

plainvm allows you to control multiple virtual machines which are distributed among many hosts through your browser.
JavaScript
38
star
61

gemini-angular-drawing-demo

TypeScript
38
star
62

angular2-simple-build

Simple build for "Hello world!" Angular 2 application.
TypeScript
37
star
63

versionable-collections

Collection optimized for AngularJS 1.x one-way bindings
JavaScript
33
star
64

typed-calc

Interpreter for simply typed lambda calculus implemented in JavaScript λ
JavaScript
33
star
65

ngx-circular-player

Circular player for Angular
TypeScript
32
star
66

swagger-typescript-fetch-api

Swagger codegen for TypeScript Fetch API.
HTML
32
star
67

angular2-stripe-demo

TypeScript
30
star
68

blobreader

Simple interface for reading blobs sequentially
JavaScript
28
star
69

ts-rpc

RPC protocol with services defined via TypeScript interfaces.
TypeScript
27
star
70

performance-patterns

TypeScript
27
star
71

podcast

Website of the Programming Podcast
TypeScript
26
star
72

dots

Implements the wildcard file matching in Go used by golint, go test etc.
Go
25
star
73

ng-tutorial

Platform for AngularJS interactive tutorials
JavaScript
25
star
74

purely-fast

TypeScript
25
star
75

ELang

Simple programming language created for educational purpose
Java
24
star
76

gently-js

Module which returns the offensive words in a string. A soft reminder to be nicer to each other ❤️.
JavaScript
23
star
77

angular-realworld-example-app-qucklink

TypeScript
22
star
78

optimizing-apps-angular-demo

Demo application for my talk on optimizing Angular apps
TypeScript
21
star
79

ngmigrate

Automated migration of <template> to <ng-template> for Angular 4+
JavaScript
20
star
80

dynamic-route-creator

[DEPRECATED] Demo for dynamically defining routes in Angular 2
TypeScript
19
star
81

guess-js-angular-demo

TypeScript
18
star
82

lazy-loading-routes-angular2

WARNING: Uses deprecated APIs.
JavaScript
18
star
83

angular2-hot-loader-demo

Demo of the Angular 2 hot loader prototype
TypeScript
18
star
84

guess-js-react-demo

JavaScript
17
star
85

angular2-rollup-build

Simple build for "Hello world!" Angular 2 application with rollup.
HTML
17
star
86

getting-started-with-angular

Code for the second edition of the book "Switching to Angular 2", with title "Getting started with Angular".
TypeScript
17
star
87

svg-design-patterns

This repository contains UML class diagrams of some design and architectural patterns.
17
star
88

kitty-cinema

HTML
16
star
89

programming-podcast-samples

TypeScript
16
star
90

react-di-demo

Demo for my blog post "Implementing Angular's Dependency Injection in React. Understanding Element Injectors."
JavaScript
16
star
91

code-splitting-web-dev

TypeScript
15
star
92

react-drag

JavaScript
15
star
93

ivy-library-distribution-demo

TypeScript
14
star
94

angular-bazel-hello-world

Simple Angular app with Bazel configuration
HTML
13
star
95

viewchildren-contentchildren-demo

TypeScript
12
star
96

photos.mgechev.com

Website for my personal photography.
TypeScript
12
star
97

top-packages

TypeScript
12
star
98

v8-sorting-test

Testing the sorting performance of Google's V8 JavaScript engine.
Perl
12
star
99

immutable-differ

Work in progress.
TypeScript
11
star
100

guess-angular

TypeScript
11
star