@aca-1/a2-composer 中文文档教程

发布于 8年前 浏览 17 项目主页 更新于 3年前

Angular 2 - Composer Library

注意:您可以创建自己的组件,这些组件是为您的应用程序定制的。 Composer 完成所有繁重的工作,为应用程序集成提供最大的灵活性。

Directives

Binding

binding 属性可以附加到任何元素以管理设备属性的数据。

NameBindingDirectionValid TypesDescription
valueTwo-wayRead & WriteStringValue of the bound. Updates when servers value is changed.
sysOne-wayWrite-onlyStringIdentifier of the system to connect
modOne-wayWrite-onlyStringIdentifier of the module in the system to use e.g. Display
indexOne-wayWrite-onlyNumberIndex of the module in the system. Default: 1
bindOne-wayWrite-onlyStringName of the variable in module to bind
execOne-wayWrite-onlyStringName of the function to execute on the server when the binding value changes. If undefined no function call will occur. If defined as empty function name will be bind value
paramsOne-wayWrite-onlyAny[]Array parameters to pass into the function on the server. Defaults to value

Debug

debug 属性可以附加到任何元素以获取日志信息所选设备。

< /div>

NameBindingDirectionValid TypesDescription
outputTwo-wayRead & WriteStringArray of Debugging messsages on set module
sysOne-wayWrite-onlyStringIdentifier of the system to connect
modOne-wayWrite-onlyStringIdentifier of the module in the system to use e.g. Display
indexOne-wayWrite-onlyNumberIndex of the module in the system. Default: 1
enableOne-wayWrite-onlyStringEnables debugging. Output will not update if false

Services

System Service

系统服务执行绑定上的所有交互。

通过此服务设置身份验证详细信息。

Resources Service

资源服务用于使访问 Control API 变得简单。

Usage in Web Workers

在 web worker 中运行 Angular 2 会限制对某些全局范围变量的访问。 由于 auth 需要本地和会话存储才能正常运行,因此您需要在您的应用程序中注册一个 Message Broker,以便 auth 可以运行。

下面给出了如何注册此消息代理的示例。

import {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker';
import { DataStoreBroker } from '@aca-1/a2-composer';

bootstrapWorkerUi('webworker.bundle.js', WORKER_UI_LOCATION_PROVIDERS).then((ref) => {
    let broker = new DataStoreBroker(ref);
});

您还需要将 DataStoreWorkerService 添加到根模块,以便工作人员与代理进行通信。

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS } from '@angular/platform-webworker';
import { ACA_COMPOSER_MODULE, DataStoreService, DataStoreWorkerService } from '@aca-1/a2-composer';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
      ...
  ],
  imports: [
    WorkerAppModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    ACA_COMPOSER_MODULE
  ],
  providers: [
    ...
    WORKER_APP_LOCATION_PROVIDERS,
    { provide: DataStoreService, useClass: DataStoreWorkerService }
  ]
})
export class AppModule {

}

License

麻省理工学院 © Alex Sorafumo

Angular 2 - Composer Library

Note:: You can create your own components that are customised for your application. Composer does all the heavy lifting allowing maximum flexibility for app integration.

Directives

Binding

The binding attribute can be attached to any element to manage the data for a device property.

<div binding [(value)]="value" [sys]="'sys-B0'" [mod]="module" [index]="2" [bind]="'power'" exec="switch" [params]="[value, value1, value2]"></div>

NameBindingDirectionValid TypesDescription
valueTwo-wayRead & WriteStringValue of the bound. Updates when servers value is changed.
sysOne-wayWrite-onlyStringIdentifier of the system to connect
modOne-wayWrite-onlyStringIdentifier of the module in the system to use e.g. Display
indexOne-wayWrite-onlyNumberIndex of the module in the system. Default: 1
bindOne-wayWrite-onlyStringName of the variable in module to bind
execOne-wayWrite-onlyStringName of the function to execute on the server when the binding value changes. If undefined no function call will occur. If defined as empty function name will be bind value
paramsOne-wayWrite-onlyAny[]Array parameters to pass into the function on the server. Defaults to value

Debug

The debug attribute can be attached to any element to get logging information for the selected device.

<div debug [(output)]="value" [sys]="'sys-B0'" [mod]="module" [index]="2" enabled="true"></div>

NameBindingDirectionValid TypesDescription
outputTwo-wayRead & WriteStringArray of Debugging messsages on set module
sysOne-wayWrite-onlyStringIdentifier of the system to connect
modOne-wayWrite-onlyStringIdentifier of the module in the system to use e.g. Display
indexOne-wayWrite-onlyNumberIndex of the module in the system. Default: 1
enableOne-wayWrite-onlyStringEnables debugging. Output will not update if false

Services

System Service

The systems service performs all the interactions on bindings.

Authentication details are setup through this service.

Resources Service

The resources service is used to make accessing Control API simple.

Usage in Web Workers

Running Angular 2 in web worker limits the access to certain global scope variables. As the auth needs local and session storage to operate correctly you will need to register a Message Broker in you app so that the auth can operate.

An example of how to register this message broker is given below.

import {WORKER_UI_LOCATION_PROVIDERS, bootstrapWorkerUi} from '@angular/platform-webworker';
import { DataStoreBroker } from '@aca-1/a2-composer';

bootstrapWorkerUi('webworker.bundle.js', WORKER_UI_LOCATION_PROVIDERS).then((ref) => {
    let broker = new DataStoreBroker(ref);
});

You also need to add the DataStoreWorkerService to root module so that the worker communcates with the broker.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS } from '@angular/platform-webworker';
import { ACA_COMPOSER_MODULE, DataStoreService, DataStoreWorkerService } from '@aca-1/a2-composer';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
      ...
  ],
  imports: [
    WorkerAppModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    ACA_COMPOSER_MODULE
  ],
  providers: [
    ...
    WORKER_APP_LOCATION_PROVIDERS,
    { provide: DataStoreService, useClass: DataStoreWorkerService }
  ]
})
export class AppModule {

}

License

MIT © Alex Sorafumo

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文