Skip to content

Commit c679a72

Browse files
FredrikSandellFredrikSandell
committed
Merge pull request #1 from Pelirrojo/master
Example addition
2 parents 7cf30d0 + 51c20db commit c679a72

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
.idea
12
.DS_Store
23
node_modules
34
components

‎example/app.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
'use strict';
2+
3+
/**
4+
* @ngdoc overview
5+
* @name fullGridWebworkersApp
6+
* @description
7+
* # fullGridWebworkersApp
8+
*
9+
* Main module of the application.
10+
*/
11+
var app = angular
12+
.module('angular-workers-example', ['FredrikSandell.worker-pool'])
13+
.run(function (WorkerService) {
14+
//WorkerService.setAngularUrl('../bower_components/angular/angular.js');
15+
WorkerService.setAngularUrl('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js');
16+
//WorkerService.addDependency(serviceName, moduleName, url);
17+
});
18+
19+
app.controller("myChartCtrl", function($scope,WorkerService) {
20+
21+
22+
23+
$scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma'];
24+
$scope.data = {};
25+
26+
$scope.data.reply1 = 'a';
27+
$scope.data.reply2 = 'b';
28+
$scope.data.reply3 = 'c';
29+
30+
$scope.test = function (arg) {
31+
32+
/**
33+
// This contains the worker body.
34+
// The function must be self contained.
35+
// The function body will be converted to source and passed to the worker.
36+
// The input parameter is what will be passed to the worker when it is executed. It must be a serializable object.
37+
// The output parameter is a promise and is what the worker will return to the main thread.
38+
// All communication from the worker to the main thread is performed by resolving, rejecting or notifying the output promise.
39+
// We may optionally depend on other angular services. These services can be used just as in the main thread.
40+
// But be aware that no state changes in the angular services in the worker are propagates to the main thread. Workers run in fully isolated contexts.
41+
// All communication must be performed through the output parameter.
42+
*/
43+
var workerPromise = WorkerService.createAngularWorker(['input', 'output', '$http', function (input, output, $http) {
44+
45+
var i=0;
46+
47+
var callback = function(i) {
48+
output.notify(i);
49+
i++;
50+
};
51+
52+
53+
//for (var i = 0; i < 10; i++) { callback(i); }
54+
//var intervalID = setInterval(callback(i), 3000);
55+
setInterval(function(){ callback(++i); }, Math.floor((Math.random() * 1000) + 100));
56+
57+
//output.resolve(true);
58+
//output.reject(false);
59+
60+
}]);
61+
62+
workerPromise
63+
.then(function success(angularWorker) {
64+
//The input must be serializable
65+
return angularWorker.run($scope.awesomeThings);
66+
}, function error(reason) {
67+
68+
console.log('callback error');
69+
console.log(reason);
70+
71+
//for some reason the worker failed to initialize
72+
//not all browsers support the HTML5 tech that is required, see below.
73+
}).then(function success(result) {
74+
75+
console.log('success');
76+
console.log(result);
77+
78+
//handle result
79+
}, function error(reason) {
80+
//handle error
81+
console.log('error');
82+
console.log(reason);
83+
84+
}, function notify(update) {
85+
//handle update
86+
87+
$scope.data['reply' + arg] += update + '\n';
88+
//console.log(arg);
89+
//console.log(update);
90+
});
91+
92+
};
93+
});

‎example/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Angular Workers Example</title>
8+
9+
<style>
10+
body { padding-top: 50px; }
11+
.starter-template { padding: 40px 15px; text-align: center; }
12+
</style>
13+
14+
<!-- Bootstrap -->
15+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
16+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
17+
18+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
19+
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
20+
<!--[if lt IE 9]>
21+
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
22+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
23+
<![endif]-->
24+
</head>
25+
<body ng-app="angular-workers-example">
26+
27+
<div class="container" ng-controller="myChartCtrl">
28+
29+
<div class="starter-template">
30+
<h1 id="title">HTML5 WebWorkers with angular-worker</h1>
31+
<p class="lead">Using webworkers with angular environment, but in an isolated context</p>
32+
</div>
33+
34+
<div class="row">
35+
<div class="col-xs-6 col-lg-4">
36+
<h2>Thread 1</h2>
37+
<p>{{data.reply1}}</p>
38+
<p>
39+
<a class="btn btn-default" role="button" ng-click="test(1)">Execute! »</a>
40+
</p>
41+
</div>
42+
43+
<!--/.col-xs-6.col-lg-4-->
44+
<div class="col-xs-6 col-lg-4">
45+
<h2>Thread 2</h2>
46+
<p>{{data.reply2}}</p>
47+
<a class="btn btn-default" role="button" ng-click="test(2)">Execute! »</a>
48+
</p>
49+
</div>
50+
51+
<!--/.col-xs-6.col-lg-4-->
52+
<div class="col-xs-6 col-lg-4">
53+
<h2>Thread 3</h2>
54+
<p>{{data.reply3}}</p>
55+
<a class="btn btn-default" role="button" ng-click="test(3)">Execute! »</a>
56+
</p>
57+
</div>
58+
<!--/.col-xs-6.col-lg-4-->
59+
</div>
60+
61+
62+
</div>
63+
64+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
65+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
66+
67+
<script src="../bower_components/angular/angular.js"></script>
68+
<script src="../dist/angular-workers.js"></script>
69+
70+
<script src="app.js"></script>
71+
72+
</body>
73+
</html>

0 commit comments

Comments
 (0)