Rx javascript: Difference between revisions
Jump to navigation
Jump to search
| Line 87: | Line 87: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=Basic Example= | =Basic Example= | ||
==Class Approach== | ==From with Arrow Approach== | ||
<syntaxhighlight lang="ts"> | |||
import { from as ObservableFrom } from 'rxjs'; | |||
let numbers = [1,2,3,40] | |||
let values = ObservableFrom(numbers) | |||
source.subscribe( | |||
value => console.log(`"Value received was ${value}`), | |||
e => console.error(`We had an error ${e}`), | |||
() => console.log("Complete") | |||
); | |||
</syntaxhighlight> | |||
==From with Class Approach== | |||
Quite liked the explanation Anyway your responsibility is to provide a class which implements next, error and complete. You do not need to implement all but it is shown here | Quite liked the explanation Anyway your responsibility is to provide a class which implements next, error and complete. You do not need to implement all but it is shown here | ||
<syntaxhighlight lang="ts"> | <syntaxhighlight lang="ts"> | ||
| Line 112: | Line 126: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | |||
==Create== | |||
This is much the same thing but we provide the function which takes an observer. | |||
<syntaxhighlight lang="ts"> | <syntaxhighlight lang="ts"> | ||
import { from as ObservableFrom } from 'rxjs'; | import { from as ObservableFrom } from 'rxjs'; | ||
let numbers = [1,2,3,40] | let numbers = [1,2,3,40] | ||
let | let source = Observable.create(observer => { | ||
for(let n of numbers) { | |||
observer.next(n) | |||
} | |||
}); | |||
source.subscribe( | source.subscribe( | ||
Revision as of 04:02, 2 September 2020
Introduction
Packages
The course used the following tools
"dependencies": {
"rxjs": "^6.6.2"
},
"devDependencies": {
"source-map-loader": "^1.1.0",
"ts-loader": "^8.0.3",
"typescript": "^4.0.2",
"typings": "^2.1.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
Typescript Configuration
I used the following tsconfig.json.
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
Webpack Configuration
Specify
- the entry point
- the output file
- add script tag to index.html
- Provide module loaders, which consists of a test and which loader to use
- Provide how Webpack should resolve modules
module.exports = {
entry: "./main",
output: {filename: "app.js"},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader'],
},
{
test: /\.ts$/,
use: "ts-loader",
exclude: "/node_modules",
}
]
},
resolve: {
extensions: [
".ts",
".js"
],
}
}
And the main.ts
alert("ok")
And in the Index.html
<html>
<head>
<title>RxJs</title>
</head>
<body>
<div>hello</div>
<script src="app.js"></script>
</body>
</html>
Scripts Configuration
In the package.json we can not set our scripts for npm
"scripts": {
"start": "webpack-dev-server --watch --inline",
"postinstall": "typings install"
}
Basic Example
From with Arrow Approach
import { from as ObservableFrom } from 'rxjs';
let numbers = [1,2,3,40]
let values = ObservableFrom(numbers)
source.subscribe(
value => console.log(`"Value received was ${value}`),
e => console.error(`We had an error ${e}`),
() => console.log("Complete")
);
From with Class Approach
Quite liked the explanation Anyway your responsibility is to provide a class which implements next, error and complete. You do not need to implement all but it is shown here
import { from as ObservableFrom } from 'rxjs';
let numbers = [1,2,3,40]
let source = ObservableFrom(numbers)
class MyObserverable
{
next(value) {
console.log(`"Value received was ${value}`)
}
error(e) {
console.error(`We had an error ${e}`)
}
complete() {
console.log("Complete")
}
}
source.subscribe(new MyObserverable)
Create
This is much the same thing but we provide the function which takes an observer.
import { from as ObservableFrom } from 'rxjs';
let numbers = [1,2,3,40]
let source = Observable.create(observer => {
for(let n of numbers) {
observer.next(n)
}
});
source.subscribe(
value => console.log(`"Value received was ${value}`),
e => console.error(`We had an error ${e}`),
() => console.log("Complete")
);