Skip to content

Commit 6d4a27d

Browse files
tolyotolyo
committed
Wasm example
1 parent 84605d9 commit 6d4a27d

File tree

5 files changed

+143
-18
lines changed

5 files changed

+143
-18
lines changed

‎index.html‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,16 @@
5454
}
5555

5656
class Demo {
57-
constructor($eventBus, $scope, adder) {
58-
this.adder = adder;
59-
}
60-
61-
async test() {
62-
this.y = (await this.adder).add(1, 2);
57+
constructor($eventBus, $scope) {
58+
$eventBus.subscribe("demo", (val) => {
59+
$scope["$ctrl"].mailBox = val;
60+
});
6361
}
6462
}
6563
window.angular
6664
.module("todo", [])
6765
.controller("TodoCtrl", TodoController)
68-
.controller("DemoCtrl", Demo)
69-
.wasm("adder", "src/directive/wasm/math.wasm");
66+
.controller("DemoCtrl", Demo);
7067
});
7168
</script>
7269

@@ -101,13 +98,28 @@
10198
</style>
10299
</head>
103100
<body ng-app="todo">
104-
<div ng-controller="DemoCtrl as $ctrl">
105-
{{ $ctrl.y }}
106-
<button ng-click="$ctrl.test()">test</button>
101+
<div ng-controller="TodoCtrl as $ctrl">
102+
<h3>Todos</h3>
103+
<button ng-click="$ctrl.archive()">Archive</button>
104+
<ul>
105+
<li ng-repeat="todo in $ctrl.tasks">
106+
{{ todo.task }} {{ todo.done }}
107+
<input type="checkbox" ng-click="todo.done = !todo.done" />
108+
</li>
109+
</ul>
110+
<form ng-submit="$ctrl.add(newTodo)">
111+
<input type="text" ng-model="newTodo" ng-required="true" />
112+
<button type="submit">Add</button>
113+
</form>
114+
115+
<button ng-get="/mock/div" target="#p" trigger="click" animate="true">
116+
Get
117+
</button>
118+
<div id="p"></div>
119+
120+
<div ng-if="bool" class="fade" animate="true">Fade me in out</div>
121+
<button ng-click="bool=true">Fade In!</button>
122+
<button ng-click="bool=false">Fade Out!</button>
107123
</div>
108-
<ng-wasm src="src/directive/wasm/math.wasm" as="demo1"></ng-wasm>
109-
<input type="number" ng-model="a" ng-keyup="x = demo1.add(a, b)" />
110-
<input type="number" ng-model="b" ng-keyup="x = demo1.add(a, b)" />
111-
{{ x }}
112124
</body>
113125
</html>

‎src/directive/http/http.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export function createHttpDirective(method, attrName) {
184184
: [compiled];
185185
}
186186

187-
const targetSelector = attrs["target"];
187+
const targetSelector = attrs.target;
188188
const target = targetSelector
189189
? document.querySelector(targetSelector)
190190
: element;

‎src/directive/wasm/wasm-example.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>AngularTS</title>
6+
<link rel="shortcut icon" type="image/png" href="images/favicon.ico" />
7+
<script type="module" src="/src/index.js"></script>
8+
<script>
9+
document.addEventListener("DOMContentLoaded", () => {
10+
class Todo {
11+
constructor(task) {
12+
this.task = task;
13+
this.done = false;
14+
}
15+
}
16+
class TodoController {
17+
constructor() {
18+
this.greeting = "Todos";
19+
this.model = {
20+
name: "John",
21+
lastName: "Doe",
22+
};
23+
this.tasks = [
24+
new Todo("Learn AngularTS"),
25+
new Todo("Build an AngularTS app"),
26+
];
27+
}
28+
29+
get() {
30+
return this.counter;
31+
}
32+
33+
increase() {
34+
console.log(this);
35+
this.counter++;
36+
}
37+
38+
/**
39+
* @param {String} task
40+
* @return {void}
41+
*/
42+
add(task) {
43+
this.tasks.push(new Todo(task));
44+
}
45+
46+
/**
47+
* Delete all finished tasks
48+
* @return {void}
49+
*/
50+
archive() {
51+
let newTasks = this.tasks.filter((task) => !task.done);
52+
this.tasks = newTasks;
53+
}
54+
}
55+
56+
class Demo {
57+
constructor($eventBus, $scope, adder) {
58+
this.adder = adder;
59+
}
60+
61+
async test() {
62+
this.y = (await this.adder).add(1, 2);
63+
}
64+
}
65+
window.angular
66+
.module("todo", [])
67+
.controller("TodoCtrl", TodoController)
68+
.controller("DemoCtrl", Demo)
69+
.wasm("adder", "/src/directive/wasm/math.wasm");
70+
});
71+
</script>
72+
73+
<style>
74+
.fade {
75+
background-color: red;
76+
}
77+
/* The starting CSS styles for the enter animation */
78+
.fade.ng-enter {
79+
transition: 0.5s linear all;
80+
background-color: unset;
81+
opacity: 0;
82+
}
83+
84+
/* The finishing CSS styles for the enter animation */
85+
.fade.ng-enter.ng-enter-active {
86+
opacity: 1;
87+
background-color: red;
88+
}
89+
90+
/* The starting CSS styles for the leave animation */
91+
.fade.ng-leave {
92+
transition: 0.5s linear all;
93+
opacity: 1;
94+
}
95+
96+
/* The finishing CSS styles for the leave animation */
97+
.fade.ng-leave.ng-leave-active {
98+
opacity: 0;
99+
background-color: unset;
100+
}
101+
</style>
102+
</head>
103+
<body ng-app="todo">
104+
<div ng-controller="DemoCtrl as $ctrl">
105+
{{ $ctrl.y }}
106+
<button ng-click="$ctrl.test()">test</button>
107+
</div>
108+
<ng-wasm src="/src/directive/wasm/math.wasm" as="demo1"></ng-wasm>
109+
<input type="number" ng-model="a" ng-keyup="x = demo1.add(a, b)" />
110+
<input type="number" ng-model="b" ng-keyup="x = demo1.add(a, b)" />
111+
{{ x }}
112+
</body>
113+
</html>

‎src/directive/worker/worker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { $injectTokens as $t } from "../../injection-tokens.js";
2-
import { callBackAfterFirst, isDefined, wait } from "../../shared/utils";
2+
import { callBackAfterFirst, isDefined, wait } from "../../shared/utils.js";
33
import { getEventNameForElement } from "../http/http.js";
44

55
ngWorkerDirective.$inject = ["$worker", $t.$parse, $t.$log];

‎src/shared/utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1280,7 +1280,7 @@ export function startsWith(str, search) {
12801280
}
12811281

12821282
/**
1283-
* Loads and instantiates a WebAssembly module with proper error handling.
1283+
* Loads and instantiates a WebAssembly module
12841284
*
12851285
* @param {string} src - URL to the wasm file
12861286
* @returns {Promise<Object>} - Resolves to wasm exports

0 commit comments

Comments
 (0)