Angular 等了三年，那个她已经来了

Angular 生态丰富，功能强大，支撑了许多大型项目的开发。而且一直在前方等待着其他框架跟上。但是不得不直面的一个问题就是：“在等待其他框架跟上的这三年”，Angular 在陆陆续续抛弃之前引以为豪的设计。又由于大量的历史包袱，这些设计变更又做得扭扭捏捏，做不到轻装上阵。比如 NgModule 之于 Standalone ，zone.js 之于 Singals ，Rxjs 更是一言难尽

Angular 虽然有许多超前的架构设计和工程化能力，但是就目前而言，仍有以下不足：

响应式系统不好用：即便是新引入的 Signal ，如果要访问一个状态值，需要像函数一样调用，这是反直觉的实现方式
对 tsx 支持不友好：全网很难找到 angular+tsx 的最佳实践。单靠模版，支撑大型业务系统的开发，难度是很大的
ioc 容器太过繁琐：看看文档就知道了，angular 劝退新人的点很多，ioc 繁琐是最主要的
模块化隔离性不够好，拖泥带水：虽然 angular 引入了模块化概念，但是模块之间隔离不彻底。比如我在 A 模块实现了一个 service ，如果要在 B 模块使用，就需要明确指定 service 在 A 模块的文件路径，而不是指定一个名称就行。这样就让模块耦合很深。类似这样的设计问题还有很多

而Cabloy-Front就很好的解决了 angular 的这些短板。Cabloy-Front 是一款支持 ioc 容器的 Vue3 框架，有以下特点：

底层采用 vue3 的响应式系统：在 ioc 容器的加持下，定义响应式状态不再需要ref/reactive，也不再需要ref.value
在独立的 render class 中书写 tsx 代码，从而让 tsx 代码更加舒展、从容
提供了两类 ioc 容器：一类是全局 ioc 容器，可以实现 pinia 的能力。另一类是组件实例 ioc 容器，该容器与 Vue 组件实例绑定，在这个容器中的所有 Class 实例都可以在组件实例范围之内共享数据和逻辑
模块化体系：实现了完全隔离的模块化体系。模块作为一个相对独立的业务单元，包含各种类型的资源，包括 Config 配置、Constant 常量、Locale 国际化、Error 错误异常、Component 组件，等等。在跨模块访问这些资源时，是基于名称寻址，而不是基于资源的原始文件路径寻址，因此，心智负担更低
更优雅的 ioc 容器开发体验：采用依赖注入和依赖查找相结合的方式，大量减少装饰器的使用，让代码更简洁、更优雅。优先使用依赖查找的机制可以达到化类型于无形的效果？简而言之，就是无须标注类型，却能享受到“类型约束”和“智能提示”的好处

口说无凭，我们简单看一下cabloy-front的代码风格是怎样的：

1 、定义响应式状态

在组件中定义一个响应式变量 count ，并且添加两个方法修改变量

export class MotherPageCounter {
  count: number = 0;

  inrement() {
    this.count++;
  }

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

2 、使用响应式状态

采用 tsx 语法使用 count

export class RenderPageCounter {
  render() {
    return (
      <div>
        <div>count(ref): {this.count}</div>
        <button onClick={() => this.inrement()}>Inrement</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}

3 、逻辑抽离

将 count 逻辑抽离出来，创建一个 Counter Bean

@Local()
export class Counter {
  count: number = 0;

  inrement() {
    this.count++;
  }

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

4 、在组件中注入并使用

使用装饰器函数 @Use 注入 bean

export class MotherPageCounter {
  @Use()
  $$counter: Counter;
}

采用 tsx 语法使用已注入的 bean 实例

export class RenderPageCounter {
  render() {
    return (
      <div>
        <div>count(ref): {this.$$counter.count}</div>
        <button onClick={() => this.$$counter.inrement()}>Inrement</button>
        <button onClick={() => this.$$counter.decrement()}>Decrement</button>
      </div>
    );
  }
}

Cabloy-Front 框架已开源：https://github.com/cabloy/cabloy-front