Using angular services

[shturminator]

Could you please suggest an approach to use sevices/factories inside react2angular component?
Thanks.

[Sawtaytoes]

As a workaround, you should be able to pass them into the viewmodel, something like vm.accountService = accountService and then in the view: <some-react-component accountService="vm.accountService" />.

[bcherny]

Hi @shturminator! You have 3 options:

Option 1: Simply import your service/factory from your React module. For example, say your factory is (this is from https://docs.angularjs.org/guide/providers):

// factory.js
myApp.factory('apiToken', ['clientId', function apiTokenFactory(clientId) {
  var encrypt = function(data1, data2) {
    return (data1 + ':' + data2).toUpperCase();
  };
  var secret = window.localStorage.getItem('myApp.secret');
  var apiToken = encrypt(clientId, secret);
  return apiToken;
}]);

You can update that to:

// factory.js
var encrypt = function(data1, data2) {
 return (data1 + ':' + data2).toUpperCase();
};
var secret = window.localStorage.getItem('myApp.secret');
export var apiToken = encrypt(clientId, secret);
myApp.factory('apiToken', ['clientId', function apiTokenFactory(clientId) {
 return apiToken;
}]);

Then from your React component, simply import apiToken from factory.js. An added benefit is separating core logic from its Angular bindings.

Option 2 is what @Sawtaytoes suggested. Just DI your service/factory, and pass it to your React component as a regular prop.

Option 3 Once #49 is merged, DI will be supported out of the box.

[bcherny]

With v3.1.0, you can now use the extended DI syntax:

react2angular(Component, props, providersToDI)

See example in the docs.

[shturminator]

Great!. Thank you for a solution. On Monday, December 11, 2017, 7:23:07 PM GMT+2, Boris Cherny <[email protected]> wrote: With v3.1.0, you can now use the extended DI syntax: react2angular(Component, props, providersToDI) See example in the docs. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Sawtaytoes]

What if we add propTypes? Do we still need to define DI in this way?

[bcherny]

@Sawtaytoes Yes, just tell react2angular to infer props from propTypes by passing null as the 2nd argument:

class A {}
A.propTypes = {..}

let B = react2angular(A, null, ['$http', '$log'])