UX Markup

<Panel ux:Class="image">
    <Image Width="15" Height="15" File="Assets/raindrops.png">
        <Rotation Degrees="20.6" />
    </Image>
</Panel>

Angular Component

import { Component, 
        ChangeDetectionStrategy, 
        ChangeDetectorRef 
} from '@angular/core';

@Component({
    selector: 'weather-app',
    template: require('./app.component.ngux'),
   
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent {

    constructor() {
    	
    	);
    }


}

ngux Markup

<Panel ux:Class="image">

    <Image Width="{{width}}" Height="15" File="{{image.fileName}}">
        <Rotation Degrees="20.6" />
    </Image>
        <router-outlet>
            <ng:image-details *ngIf="image.isActive" [ng:name="image.name"]>
            </ng:image-details>
        </router-outlet>

</Panel>

Angular View

App Component

Precipitation Component

Data Service

Tab Component

Fuse Architecture

Observables

UX Markup

Javascript

Fuse Library

Uno Compiler

Obj C / C++

Fuse Angular

Observables

Javascript

Fuse Library

Uno Compiler

Obj C / C++

NGUX

TypeScript

NGUX Compiler

Rendering in Angular 2

Application

Code

UI Layer

Instructions

Events

Browser (DOM)

Server

Fuse

Angular Renderer

class Renderer {
    selectRootElement(selectorOrNode: string|any, debugInfo?: RenderDebugInfo) : any
    createElement(parentElement: any, name: string, debugInfo?: RenderDebugInfo) : any
    createViewRoot(hostElement: any) : any
    createTemplateAnchor(parentElement: any, debugInfo?: RenderDebugInfo) : any
    createText(parentElement: any, value: string, debugInfo?: RenderDebugInfo) : any
    projectNodes(parentElement: any, nodes: any[]) : void
    attachViewAfter(node: any, viewRootNodes: any[]) : void
    detachView(viewRootNodes: any[]) : void
    destroyView(hostElement: any, viewAllNodes: any[]) : void
    listen(renderElement: any, name: string, callback: Function) : Function
    listenGlobal(target: string, name: string, callback: Function) : Function
    setElementProperty(renderElement: any, propertyName: string, propertyValue: any) : void
    setElementAttribute(renderElement: any, attributeName: string, attributeValue: string) : void
    setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string) : void
    setElementClass(renderElement: any, className: string, isAdd: boolean) : void
    setElementStyle(renderElement: any, styleName: string, styleValue: string) : void
    invokeElementMethod(renderElement: any, methodName: string, args?: any[]) : void
    setText(renderNode: any, text: string) : void
    animate(element: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[], duration: number, delay: number, easing: string) : AnimationPlayer
}

Fuse Renderer

@Injectable()
export class FuseRenderer implements Renderer {
    ...
}

@NgModule
providers: [

        FuseRenderer,
        { provide: Renderer, useClass: FuseRenderer },
    ]

// bootstrap
let _platformFuseDynamic = createPlatformFactory(platformCoreDynamic, 'FuseDynamic', FUSE_COMPILER_PROVIDERS);

export function platformFuseDynamic(extraProviders?: any[]): PlatformRef {
    return new FusePlatformRef(_platformFuseDynamic(extraProviders));
}


platformFuseDynamic().bootstrapModule(MyAppModule);