The nger's intro from oppoffice

用ng自由组合开发小程序

项目名称意义，用ng的人！I am a nger!

Warning! Warning! Warning! 这不仅仅是一个前端项目。

vue、react相继都有了小程序的开发框架，作为一个nger，也该为社区做点事情了! 很遗憾，由于ng和小程序的差异性，我们暂时没打算直接把ng项目转换成小程序，而是用ng的一套**（依赖注入、装饰器等）来规范开发小程序!以达到一套代码多平台运行。

技术栈说明：Typeorm/Nestjs/Angular/Ngrx/JSX/Injector(依赖注入)/Decorator(装饰器)/Webpack/Less/Sass/Gulp...

系统架构

面向终端用户对开发者友好的框架

用装饰器实现应用跨平台，如Controller装饰器，在前端就是发送http请求，在后端就是响应http请求主要目标nger-compiler根据平台需求,选择性的去除或修改代码,nger-platform-*提供装饰器解析器。将ng中的ngIf、ngFor通过编译器，拓展到其他运行环境，如小程序等。

依赖环境

安装nodejs
安装docker
安装docker-compose
npm install
docker-compose up -d
npm start

目录规范

开发文档

核心概念
- TypeContext 每个用装饰器装饰过得类都会有一个TypeContext,主要作用是查询装饰器参数。
- NgModuleRef @NgModule装饰器装饰的类的运行时实例，每个NgModule在系统运行时创建
- ComponentRef @Component装饰的类实例，需要NgModuleRef创建。
- PipeRef @Pipe装饰的类实例，需要NgModuleRef创建。
- DirectiveRef @Directive装饰的类实例，需要NgModuleRef创建。
- PageRef @Page装饰的类实例，需要NgModuleRef创建。
- ControllerRef @Controller装饰的类实例，需要NgModuleRef创建。
内置周期钩子
- APP_INITIALIZER 系统初始化时运行，依赖注入还没有注册完毕，可在此时动态插入或替换某注入服务。并自动执行NgModule类中的构建方法。Platform需要注入此类型钩子，才能正常运行。
- APP_ALLREADY APP_INITIALIZER所有钩子执行完毕后执行。这时依赖注入已准备完毕，所有服务可通过injector的方式获取。这个周期内，不要修改依赖注入服务。

核心**

ng的依赖注入

开发进度

nger-cli

命令行工具

nger-core

核心库

生态

模块及文档连接	作用
nger-module-gulp	gulp打包相关

任务安排

开发重点 nger-compiler 到 nger-di 目标src目录中的文件，编译到各个平台，并运行。

扫描项目目录，并记录每个文件导出的有装饰器装饰的类及名称。
根据运行目标，去掉没有用的或者可以去掉的一些内容，例如@It,@Command,@Option等
@Component装饰的类生成对应的Component(ComponentInstance)
@Page装饰的类生成对应的Page(PageInstance)
搜集配置信息生成json文件
编译html生成wxml文件
编译scss/less/styl生成wxss文件
编译生成js文件

TODO

小程序适配思路

其实小程序和ng的适配度还蛮高的！

@Component正好和Component对应。不唯一，可以有任意个实例
App和NgModule对应。全局唯一
@Directive和小程序的指令对应，这里有区别ng中可以自定义指令，小程序不行。不唯一。
@Page和小程序的Page对应。全局唯一

Controller

客户端运行时需要编译器转码

import { Controller, Get, Post } from 'nger-core'
@Controller({
    path: '/'
})
export class IndexController {
    info: any = {
        username: 'nger',
        age: 28
    }
    @Get()
    userInfo() {
        return this.info;
    }
    @Post()
    setUserInfo(username: string, age: number) {
        this.info = {
            username,
            age
        }
    }
}
// to
import { Get, Post, Controller } from 'nger-core'
@Controller({
    path: '/'
})
export class NgerUserController {
    @Get()
    userInfo: () => Promise<any>;
    @Post()
    setUserInfo: (username: string, age: number) => Promise<any>;
}

@Page

// TODO

@Page({
    path: `pages/index/index`,
    template: `<view></view>`
})
export class ImsPage{}

// pages/index/index.js

// pages/index/index.json

// pages/index/index.wxss

// pages/index/index.wxml

@Component

// **/ims-demo.ts
import {Component,Input,EventEmitter} from 'nger-core';

@Component({
    selector: 'ims-demo',
    template: `<view (onTap)="click"></view>`
})
export class ImsDemo {
    @Input()
    title: string;

    @Output()
    bindmyevent: EventEmitter;

    click(e){
        this.bindmyevent.emit(e);
    }
}

// to
// **/ims-demo.js
const instance = new ImsDemo();
Component({
    behaviors: [],
    data: {
        instance: instance
    },
    properties: {
        // Input
        title: instance.title
    },
    lifetimes: {
        created(){
            instance.ngOnInit()
        },
        attached() { 
            instance.onViewInit()
        },
        ready(){
            instance.onAfterViewInit()
        },
        moved() { 
            instance.onMoved()
        },
        detached() { 
            instance.onDestory()
        },
        error() { 
            instance.onError()
        },
    },
    pageLifetimes: {
        show(){
            instance.onShow()
        },
        hide(){
            instance.onHide()
        },
        resize(){
            instance.onResize()
        }
    },
    methods: {
        click: instance.click
    }
})
// **/ims-demo.json
{}
// **/ims-demo.wxss

// **/ims-demo.wxml
<view onTap="click"></view>

ngIf

<ng-template [ngIf]="condiction"></ng-template>
<!-- to -->
<ng-template wx:if="{{condiction}}"></ng-template>

<ng-template [ngIf]="condiction" [ngIfELse]="elseBlock">condiction</ng-template>
<ng-template #elseBlock>elseBlock</ng-template>
<!-- to -->
<ng-template wx:if="{{condiction}}"></ng-template>
<ng-template wx:else>elseBlock</ng-template>

<ng-template [ngIf]="condiction" [ngIfThen]="thenBlcok" [ngIfELse]="elseBlock"></ng-template>
<ng-template #thenBlcok>thenBlcok</ng-template>
<ng-template #elseBlock>elseBlock</ng-template>
<!-- to -->
<ng-template wx:if="{{condiction}}">thenBlcok</ng-template>
<ng-template wx:else>elseBlock</ng-template>

ngFor

<ng-template ngFor let-item="it" let-i="index" [ngForOf]="items"></ng-template>
<!-- to -->
<ng-template wx:for="items" wx:for-item="it" wx:for-index="i"></ng-template>