Angular and Ethereum — Beyond Web3
JSON-RPC
In the last article, I explained how to use @ngeth with Angular. Let’s see how it communicate with an Ethereum client without using web3.

JSON RPC
Ethereum clients get instructions from JSON-RPC methods. If you want to get the latest block number for example you would send this JSON-RPC request :
{
"jsonrpc":"2.0",
"method":"eth_blockNumber",
"params":[],
"id":1
}And your node would response with:
{
"id":1,
"jsonrpc": "2.0",
"result": "0x3C6767" // 3958631
}This request can be transferred through HTTP, WebSocket or IPC.
All the methods are available here :
https://github.com/ethereum/wiki/wiki/JSON-RPC
Build with Angular
Let’s build an Angular service that provides HTTP calls to Ethereum.
ProviderModule
First we need to provide the URL of our node. It can be local like localhost:8545 or online like Infura https://ropsten.infura.io. Let’s call it ProviderModule :
First we imports HttpClientModule to make our JSON-RPC calls. Then we create a static function init that takes our URL and transforms it into an InjectionToken to be used in our future service.
You can imports the module like that in your app.module.ts :
...
imports: [ProviderModule.init('https://ropsten.infura.io')],
...ProviderService
Let’s build a provider service to handle requests and responses:
This service uses the URL from the provider.module.ts and make http calls to it with the JSON-RPC 2.0 format.
EthService
The EthService will handle every JSON-RPC methods:
Ok, here there is much to say :
BigNumber and hexadecimals :
The Ethereum Virtual Machine (EVM) doesn’t deal with float values. So the only values that your node will give you will be integer, and they can be big. For example 1Ether is actually 1000000000000000000Wei.
The problem is that Javascript doesn’t deal with integers, only numbers. And numbers are encoded on 52bits. Which means that after that, Javascript makes approximations. And you don’t want to do approximations when you work with cryptocurrencies !
That is why we need the library bn.js to deal with bignumbers.
Also, the EVM only works with hexadecimal values. So when you send a number you first need to translate it into hex. And when you get a response you need to translate from hex to decimal values. That is why we have the from and to parameters in the toBN method.
Wrap it all
Now we have a good service to manage JSON-RPC calls from Angular to our node. You “just” have to fill the service with all the other JSON-RPC methods, or alternatively you can build a json object that describes all the methods and only one function in the eth.service.ts to handle them all.
You can see here how we used it for @ngeth :
https://github.com/B2-Expand/ngeth/tree/master/libs/provider/src/lib
