<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = '6.0.0-beta.7'
</script>
<title>Chatie Angular</title>
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
# @chatie/angular
[](https://travis-ci.org/Chatie/angular) [](https://www.npmjs.com/package/@chatie/angular)
Chatie Web Component NgModule for Angular 4
This package is part of Chatie project: <https://github.com/chatie>
> Picture credit: [How to create an Angular library](http://www.dzurico.com/how-to-create-an-angular-library/)
## TL;DR
Talk is cheap, show me the code:
### App Module
```ts
import { WechatyModule } from '@chatie/angular'
@NgModule({
...
imports: [
WechatyModule,
],
...
})
```
### Html Component
```html
<wechaty
#wechaty
token="WECHATY_TOKEN"
(scan) = "onEvent('scan' , $event)"
(login) = "onEvent('login' , $event)"
>
<button (click)="wechaty.logoff()"> Logoff</button>
</wechaty>
```
Moer details, see code. ;-]
## Reference
* [How to build and publish an Angular module](https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464)
* [Understanding Angular modules (NgModule) and their scopes](https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407)
* [Making your Angular 2 library statically analyzable for AoT](https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5)
* [Getting your Angular 2 library ready for AoT](https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad)
* [Documentation for Angular Metadata Raw](https://gist.github.com/chuckjaz/65dcc2fd5f4f5463e492ed0cb93bca60)
* [Ahead-of-Time Compilation in Angular](http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/)
### NPM
* [Working with scoped packages](https://docs.npmjs.com/getting-started/scoped-packages)
## Version History
### v0.1.0 (May 2017)
1. Upgrade Angular 4.1
1. NgModule-ize Wachaty Component
### v0.0.1 (Jul 2016)
1. Modulized Angular 2 Component: `wechaty-core`
1. Support all(and same) IO Events of [Wechaty](https://github.com/chatie/wechaty)
## Known Issues & Support
Github Issue - https://github.com/chatie/angular/issues
## Author
Zhuohuan LI <zixia@zixia.net> (http://linkedin.com/in/zixia)
<a href="http://stackoverflow.com/users/1123955/zixia">
<img src="http://stackoverflow.com/users/flair/1123955.png" width="208" height="58" alt="profile for zixia at Stack Overflow, Q&A for professional and enthusiast programmers" title="profile for zixia at Stack Overflow, Q&A for professional and enthusiast programmers">
</a>
## Copyright & License
* Code & Docs ©2016-2017 zixia
* Code released under the MIT license
* Docs released under Creative Commons
var angularVersion = '@8.0.0';
System.config({
transpiler: 'ts',
typescriptOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
typescript: {
exports: 'ts',
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
app: './src',
'@angular/core':
'npm:@angular/core' + angularVersion + '/bundles/core.umd.js',
'@angular/common':
'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/compiler':
'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser':
'npm:@angular/platform-browser' +
angularVersion +
'/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic':
'npm:@angular/platform-browser-dynamic' +
angularVersion +
'/bundles/platform-browser-dynamic.umd.js',
'@angular/http':
'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router':
'npm:@angular/router' + angularVersion + '/bundles/router.umd.js',
'@angular/forms':
'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/upgrade':
'npm:@angular/upgrade' + angularVersion + '/bundles/upgrade.umd.js',
'@angular/upgrade/static':
'npm:@angular/upgrade' +
angularVersion +
'/bundles/upgrade-static.umd.js',
// Chatie NgModule libraries
'@chatie/angular': 'npm:@chatie/angular',
brolog: 'npm:brolog',
'state-switch': 'npm:state-switch',
nop: 'npm:nop',
// other libraries
rxjs: 'npm:rxjs@6.2.1',
'rxjs-compat': 'npm:rxjs-compat@6.2.1',
ts: 'npm:plugin-typescript@8.0.0/lib/plugin.js',
typescript: 'npm:typescript@2.9.2/lib/typescript.js',
'gijgo-angular-wrappers': 'npm:gijgo-angular-wrappers@1.9.8/index.ts',
gijgo: 'npm:gijgo',
'@types/jquery': 'npm:@types/jquery',
'@types/gijgo': 'npm:@types/gijgo',
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
},
rxjs: {
main: 'index.js',
defaultExtension: 'js',
},
'rxjs/operators': {
main: 'index.js',
defaultExtension: 'js',
},
},
});
<h1>{{ title }}</h1>
<ul>
<li>
GitHub:
<a href="https://github.com/Chatie/angular" target="_blank">
https://github.com/Chatie/angular
</a>
</li>
<li>Updated: Mar 11, 2020 by Huan</li>
</ul>
<wechaty
#wechaty
token="WECHATY_TOKEN"
(heartbeat) = "onEvent('heartbeat' , $event)"
(scan) = "onEvent('scan' , $event)"
(login) = "onEvent('login' , $event)"
(message) = "onEvent('message' , $event)"
(logout) = "onEvent('logout' , $event)"
(error) = "onEvent('error' , $event)"
>
</wechaty>
<h2>Wechaty Core Web Component</h2>
<label for="token">Put Your WECHATY_TOKEN here:</label>
<input
type="text"
[(ngModel)]="token"
name="token"
placeholder="WECHATY_TOKEN"
[style.background-color] = "stateColor(wechaty) | async"
>
<button (click)="wechaty.token = token">Set Token</button>
<div>
Event Counter: {{ wechaty.counter }}
<br />
Last Update: {{ wechaty.timestamp | date: 'mediumTime' }}
</div>
<img *ngIf="qrCodeUrl" [src]="qrCodeUrl">
<ol>
<li
*ngFor = "let eventName of eventNameList"
>
{{ lastEvents[eventName]?.timestamp | date: 'HH:mm:ss' }}
:
{{ eventName }}
<blockquote>
{{ lastEvents[eventName]?.data | json }}
</blockquote>
</li>
</ol>
<button (click)="wechaty.logoff()"> Log off </button>
<!-- pre>
{{ lastEvents | json }}
{{ eventNameList | json }}
</pre -->
import { Component } from '@angular/core';
//our root app component
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { map } from 'rxjs/operators';
import { WechatyModule, WechatyComponent } from '@chatie/angular';
import { Brolog } from 'brolog';
@Component({
selector: 'my-app',
templateUrl: './src/app.html',
// styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'Wechaty APP Component';
qrCodeUrl: string;
token: string;
lastEvents: any = {
heartbeat: {},
scan: {},
login: {},
message: {},
logout: {},
error: {},
};
eventNameList: string[] = Object.keys(this.lastEvents);
constructor(private log: Brolog) {
log.silly('AppComponent', 'constructor()');
}
onEvent(name: string, data: any) {
this.log.info('AppComponent', 'onEvent(%s, %s)', name, data);
this.lastEvents[name] = { data, timestamp: new Date() };
this.eventNameList = Object.keys(this.lastEvents).sort((a, b) => {
return this.lastEvents[b].timestamp - (this.lastEvents[a].timestamp || 0);
});
switch (name) {
case 'scan':
this.qrCodeUrl = data.url;
break;
case 'login':
this.qrCodeUrl = null;
break;
}
}
stateColor(wechaty: WechatyComponent) {
void wechaty
return wechaty.readyState.pipe(map(stateToColor));
function stateToColor(state: number) {
return state === WebSocket.OPEN
? 'green'
: state === WebSocket.CONNECTING
? 'yellow'
: 'red';
}
}
}
@NgModule({
imports: [BrowserModule, FormsModule, WechatyModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [
{
provide: Brolog,
useFactory() {
return Brolog.instance('silly');
},
},
],
})
export class AppModule {}
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'
import { AppModule } from './app'
platformBrowserDynamic().bootstrapModule(AppModule)