https://github.com/liutian/ivy-generator
Bypassing Angular compilers and generating Angular Ivy code directly through commands API
https://github.com/liutian/ivy-generator
angular angular-ivy angular9
Last synced: about 2 months ago
JSON representation
Bypassing Angular compilers and generating Angular Ivy code directly through commands API
- Host: GitHub
- URL: https://github.com/liutian/ivy-generator
- Owner: liutian
- Created: 2019-11-18T02:42:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T00:25:41.000Z (over 2 years ago)
- Last Synced: 2025-03-17T09:49:50.530Z (over 1 year ago)
- Topics: angular, angular-ivy, angular9
- Language: TypeScript
- Size: 193 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IvyGenerator
通过命令式api描述Angular组件，不需要依赖编译器直接生成Ivy代码，适合可视化搭建管理型页面的场景
> 注意该项目属于底层实现，需要你关注很多底层细节
## Usage
[more](./projects/ivy-generator/ivy.md)
## Demo
npm start
> 请查阅 `src/app/app.component.ts`
## hello world
```
// 生成ivy代码所需Angular API的引用集合
(window).gc_apis = apis;
// 组件中使用到的所有指令，管道和子组件集合
const directiveMap = new Map();
const pipeMap = new Map();
const componentMap = new Map();
// 工厂类初始化
const factory = new CodeFactory(componentMap, directiveMap, pipeMap);
// 组件描述
const helloWorldComponentDef = new ComponentDef('div', [
new TextNode('hello world')
]);
// 生成ivy代码
const componentDef = factory._createComponent(helloWorldComponentDef);
console.log('Ivy Code: \n\n' + helloWorldComponent._sourceCodes);
// 将组件呈现在页面上
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentDef);
this.viewContainerRef.createComponent(componentFactory);
```