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
UX
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);Fuse Angular
By Tally Barak
