Cerebral 是 JavaScriptMVC应用程序状态管理器,提供流行的JavaScript框架的声明性状态和副作用管理解决方案,拥有独立的调试器,在Cerebral中,应用程序的状态被存储在单个的树模型中,该模型管理着所有服务器端和客户端的状态。
支持的JavaScript框架AngularVueReactInfernoPreact示例@cerebral/angular Angular 视图 forCerebral.
安装
npminstall@cerebral/angular@angular/core@angular/platform-browserbabel-plugin-transform-decorators-legacyCerebralServiceCerebral 服务将 Cerebral 控制器提供给 angular 应用程序:
import{NgModule}from'@angular/core'import{BrowserModule}from'@angular/platform-browser'import{provide}from'cerebral'import{AppService}from'@cerebral/angular'import{AppComponent}from'./app.component.ts'import{SomeAngularService}from'./SomeAngularService'//CreateafactorytoinstantiateCerebral.Itcanreceive//dependencieswhichyoucan"provide"toCerebraltobeused//withinsequencesexportfunctionconfigureApp(someAngularService:SomeAngularService){returnnewAppService({//Weusethe"provide"functiontoanangularservicetothesequences//ofCerebralproviders:[provide('someAngularService',someAngularService)]})})@NgModule({imports:[BrowserModule],declarations:[AppComponent],bootstrap:[AppComponent],providers:[{provide:AppService,useFactory:configureApp,deps:[SomeAngularService]},]})exportclassAppModule{}connectdecorator
连接装饰器连接状态并向组件发出信号:
import{Component,ChangeDetectionStrategy,ChangeDetectorRef}from'@angular/core'import{sequences,state}from'cerebral/tags'import{connect,AppService,CerebralComponent}from'@cerebral/angular'@Component({selector:'app-component',template:`<div(click)="onClick()">{{foo}}</div>`,//Changedetectionneedstobesetto"OnPush"changeDetection:ChangeDetectionStrategy.OnPush})@connect({//ForAOTtoworkyouwillhavetousethearrayversionoftemplate//tagsmyName:state(['foo']),onClick:sequences(['clicked'])})exportclassAppComponentextendsCerebralComponent{//Youhavetoinject"ChangeDetectionRef"and"ControllerService"andpass//themtoparentforconnecttodoitsworkconstructor(cdr:ChangeDetectorRef,app:AppService){super(cdr,app)app.getSequence('onClick')()}}
评论