@uilite/ui
v2.0.14
Published
<h1 align="center">U I L I T E</h1> <p>Uilite is a typescript module to build website with web server</p>
Downloads
63
Readme
Getting Start
Installation
npm install @uilite/ui
Create Project
npx uilite create
Directory Structure
Controller
In this directory define the webserver structure of rest api
eg
import { Controller, RequestBody, RequestMap, RequestParam, RequestQuery } from "@uilite/ui/web/WebAnotation";
@Controller({url:""})
export class TestController{
@RequestMap("post","/stu/:id")
getStudent(@RequestParam("id") id,@RequestQuery("id") id1,@RequestBody data):any{
return {msg:"test",id:id,id1,data}
}
}
Please check below code for refrence
public
In this directory store only static file like css, js, html, .env etc
Server
In this directory use for create web server
.env
TEMPLATE_PATH=views
CORS=true
configration.ts
let envirementFileName=".env"
if(process.argv.length>=3){
envirementFileName=process.argv[2]+".env";
}
require('dotenv').config({path:__dirname+"/"+envirementFileName})
import * as bodyParser from "body-parser";
import * as express from "express"
let cors=require("cors")
export function configServer(){
let isCors=false;
if(process.env.CORS){
isCors=(process.env.CORS=="true")?true:false
}
var app=express();
if(isCors){
app.use(cors());
console.log("cors is enable");
}
else{
console.log("cors is disable")
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('views', __dirname+ '/views');
app.set('view engine', 'ejs');
app.use("/asset",express.static(__dirname+"/"+(process.env.TEMPLATE_PATH || "views")+"/asset"))
return app;
}
In this file configration are there like enable cors,body and template engine
index.ts
import { TestController } from "../Controller/Test.controller" // this controller is define in above
import { Server } from "@uilite/ui/web/WebAnotation"
import {configServer} from "./configration"
var app=configServer();
app.get("/page",(req,res)=>{
res.render("index",{title:"Testing page"})
})
Server.setApp(app);
Server.addController(new TestController());
app.listen(4600,()=>{
console.log("server start");
})
Src
Component
import {UILite,ComponentUI} from "@uilite/ui"
@ComponentUI({tagName:"app-demo",template:'<div>Hellow World</div>'})
class AppDemo extends UILite{
}
Component hooks
beforeInit()
This hook will call when component is created not init
init()
This hook will call when component is init
afterInit()
This hook will call when after init of component
reInit()
Re-init hook will call when component is removeed in view from parent component and agin add in view then re-init hook will call
updateComponent()
Use of this method you re-render the view of component
onChangeAttribute(attr:{oldValue:any,newValue:any})
this hook will call when component will change with attribute
Component Directive
Module
import {ModuleUI} from "@uilite/ui"
import {AppDemo} from "/component/path"
@ModuleUI({component:[
AppDemo
],
module:[]
})
export class AppModule{
}
Module Execution
import { AppModule } from "module/path";
import {moduleExecutionUI} from "@uilite/ui"
moduleExecutionUI(new AppModule())
Html Predefine Attribute
__if
it will use for condition if condition is true the element will appear other wise remove
eg-1
<div __if="true">display</div>
<div __if="false">display</div>
output
display
__for
it will use for itration for same type of elements
eg
<div __for="item in this.itemList;i">{__fs.item.name+" "+__fs.item.price}</div>
In for loop there are two part
1st part `item in this.itemList`
here itemList is array of item and item will bind with __fs which is a globle veriable of component and share to child elemnts
2nd part `i` after semiclone i is a veriable which contain index of for loop
__routerpath
it will show the elemnt if router path is match
eg
<div __routerpath="/demo">demo is active</div>
here when i hit url {base_url}/demo then this element will appear
__routerlink
it is a just like hyper link without refresh page
eg
<a __routerlink="'/demo'">demo</a>
__bind-ref
bind-ref is bind the html element with component veriable
eg
component code
import {ComponentUI,UILite} from "@uilite/ui"
import EleRef from "@uilite/ui/FormUtil/EleRef"
import "./SlideBar.scss"
let html=require('./SlideBar.html');
@ComponentUI({tagName:"app-demo",'<div __bind-ref="this.slider" __e-click='this.changeColor()' > Slider element</div>':})
export class Demo extends UILite{
slider=new EleRef();
changeColor(){
this.slider.getElement().style.color='red'
}
}
update particular element in component
example
in html
<div pointer="key1">{this.name}</div>
<div pointer="key2">{__fs.name}</div>
in ts file
this.updateComponent({pointerList:[
{
key:"key1"
},
{
key:"key2",
__fs:{name:"ram"} // local function state data which is define in html
}
],
__fs:{} // // globel function state data which is define in html and comman for all pointerList.
})