Page

Code Style

Zova provides a more intuitive, elegant, and powerful code style, drawing from the following core designs of Vue3, React, and Angular:

• Vue3: Intuitive state management
• React: Flexible TSX rendering
• Angular: Powerful IOC container

Creating a Page

Taking the module demo-student as an example, create a page counter

1. CLI Command

$ zova :create:page counter --module=demo-student

2. Menu Command

TIP

Context Menu - [Module Path]: Zova Create/Page

Enter the page name counter as prompted, and the VSCode plugin will automatically create the code skeleton for the page

Page Path

The system automatically assigns the page path /demo/student/counter, with the full URL at http://localhost:9000/demo/student/counter

Controller Definition

@Controller()
class ControllerPageCounter extends BeanControllerPageBase {
  protected render() {
    return null;
  }
}

Adding State

class ControllerPageCounter {
  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

Adding Render

class ControllerPageCounter {
  protected render() {
    return (
      <div>
        <div>count: {this.count}</div>
        <button onClick={() => this.increment()}>Increment</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}

Adding Style

Zova provides out-of-the-box css-in-js capabilities

class ControllerPageCounter {
  cTextCenter: string;

  protected async __init__() {
    this.cTextCenter = this.$style({
      textAlign: 'center',
    });
  }

  protected render() {
    return (
      <div class={this.cTextCenter}></div>
    );
  }
}