Chapter 10While the filter-based approach to translation seems to be easy and
flexible it has adverse performance implications. The performance
penalty incurred might be acceptable for small pages with few strings
to be translated. For bigger pages with many translations it might
quickly become a bottleneck.Using directives
To remedy the performance problems related to the filter-based approach we could
turn our attention to directives. One could imagine using syntax as follows:
<span><i18n key='greetings.hello'></i18n>, {{name}}!</span>By using a directive we could eliminate the need for an additional AngularJS watch
expression and as a result address performance issues present in the filter-based
approach. But usage of directives brings its own problems.
For a start the syntax is verbose and not very pretty. One could experiments with
alternatives (For example, by using attribute directives) but in any case templates
are becoming harder to read and modify. There is a more serious problem though:
directives can't be used in certain places. Let's consider an input field with a
placeholder attribute:
<input ng-model='name' placeholder='Provide name here'>We can't use directive-based approach to translate the "Provide name here" string.
There is simply no way of evaluating directives inside an HTML attribute.
As you can see the directive-based approach can't cover all the use cases so we need
to continue our quest in search for a solution.
Translating partials during the build-time
The last approach explored in this chapter consists of moving translation efforts
to the build system. The idea is to process all the partials and generate a set of
language-specific templates to be downloaded by a browser. In this way the
templates would appear to AngularJS as static ones and wouldn't require any
language-specific processing on the client side.