Implementing Google Translate In A Gulp AngularJS Application

Question

I'm trying to find some information about how Google Translate works with an AngularJS web application. A little background information:

• We're trying to offer a client a viable solution without prototyping something out. (The client may opt not to move forward with the translation functionality)
• The translations don't have to be perfect. We're well aware of some of the issues with automated translations and that's perfectly fine for this client's need.

My concern really stems from the following:

• An Angular application loads the text via async calls, so the text is rendered after the page loads. Will Google pick that up?
• When we navigate to a new page, we're not really loading a new page. Again, will Google's translate widget pick that up?

Much of the content they want translated is user generated, so having translations created for each piece of text is not realistic.

Their current product was never intended for international audiences, so anything beyond Google Translate is going to be a decent sized retrofit.

Thoughts?

Answer 1

If you are using angular, or any other front end framework it would be simpler to use google's translate api directly.

After you fetch the content and before being rendered by the component you would want to async call their api and map the results.

Either that, or you could write a filter in angularjs to do the translating too, but you might end up with some jank as the text would change after render

https://docs.angularjs.org/api/ng/filter/filter

See: https://cloud.google.com/translate/docs/quickstart-client-libraries