Traductions AngularJS dans un environnement WordPress

Izza WP _ localize script () imprime à l’écran les variables JavaScript qui contiennent les données dont j’ai besoin dans l’application, y compris les traductions, ainsi que les URL de l’API rest et nonce.
La fonction WP _ localize script () a été créée pour passer la chaîne de traduction en javascript. Il est également largement utilisé pour obtenir d’autres données dynamiques, comme l’URL du paramètre API dans le Dom. C’est comme ça que je l’utilise: Define (‘angtrex _ URL’, plugin Dir URL (File u);
Définition (‘angtrex _ dir’, nomedir (file);
Ajouter une action (‘WP _ enqueue scripts’, fonction () {
WP _ enqueue script (‘Angular’, ‘cdnjs.cloudflare.com \/ ajax \/ libs \/ angular.js \/ 1.4.8 \/ angular.min.js’);
Le script WP _ enqueue script (‘Angular Resource’, ‘ajax.google apis.com \/ ajax \/ libs \/ Angular js \/ 1.4.8 \/ Angular resource.js’,’ Angular ‘);
WP _ enqueue script (‘Angular trans – exp’, angtrex URL. ‘app.js’, [‘ Angular ‘]);
WP _ localize script (‘Angular trans – exp’, ‘angtrex’, ‘]
\
‘rest _ nonce’ = > WP create nonce (‘rest API’),
\
« title» = > ESC _ HTML U (‘title’, ‘angtrex’),
‘author’ = > ESC _ HTML U (‘author’, ‘angtrex’),
« View» = > ESC _ HTML U (‘Read more’, ‘angtrex’)
[1]
[1]
);
}); Comme vous pouvez le voir, l’objet que vous placez est appelé angtrex. J’ai un index appelé Translations avec trois chaînes. Ces chaînes sont échappées et prêtes à être converties en utilisant la fonction ESC _ HTML U ().
Rien de tout cela n’est unique ou nouveau, c’est ce que j’aime. Tout est normal. J’ai donc créé HTML: Add _ shortcode (‘angtrex’, ‘angtrex’) dans une fonction de code court standard pour une application de coin très simple;
Angtrex () {fonction
Ob _ Start ();
? >

<? Php
Retourner Ob _ get Clean ();
} comme vous pouvez le voir, le modèle utilise des balises pour appeler les messages et les données de la traduction. Le défi consiste à passer des variables locales aux modèles et à les rendre universellement applicables à tous les modèles et contrôleurs.
Dans mon exemple de code, je n'ai qu'un seul Contrôleur, donc les objections que je vais faire aux deux options que je considère ne sont pas très pertinentes. Mais dans un scénario réel, il y a beaucoup de contrôleurs, et cela peut changer avec le temps, et je pense que mon opposition est tenable. Avant de choisir ma solution, j'ai envisagé de faire de la traduction un service de coin. Au début, c'était logique. Mais ensuite, je dois injecter le service dans chaque Contrôleur. Ce n'est pas le cas, donc je devrais définir $Scope. Traduction égale service. C'est douloureux. Dans chaque Contrôleur, il est beaucoup plus facile de faire ce qui suit:
$range. Traduction = anxiété. Traduction; Dans ce cas aussi, mais pas très sec. Il est sujet aux erreurs. Vous pouvez oublier de le faire dans le Contrôleur, ou quelqu'un peut supprimer la ligne plus tard. De plus, si je change le code source traduit plus tard, c'est un bon remaniement. La variable $scope est unique à la portée de chaque Contrôleur d'angle. C'est le but. Mais Angular a aussi $rootscope, qui est une portée globale. Je l'ai injecté dans tous mes modules, alors j'ai décidé de l'utiliser. Oui, il est important de ne pas contaminer rootscope avec beaucoup de choses supplémentaires. Mais dans ce cas, nous parlons de quelque chose qui est nécessaire dans chaque Contrôleur et qui existe toujours dans les variables avec des fenêtres de plage.
Pour que ça marche, je l'ai utilisé. Exécution lors de la création du module d'application primaire (). Comme vous pouvez le voir ici: anxiété. App = angle. Module ('angtrex')
« ngresource»
)). Exécution (fonction ($rootscope) {
Ajouter une traduction à
Le chemin
$root range. Traduction = anxiété. Traduction;
}); Dans le rappel. Exécuter () pour ajouter une traduction à $rootscope. Il est maintenant disponible sur tous mes contrôleurs. Passer au JavaScript MVC, mais maintenir l'accessibilité Angular et d'autres cadres JavaScript MVC offrent certainement une bonne expérience utilisateur. Cependant, la création de bonnes expériences pour les anglophones ayant une vision normale ne devrait pas se faire aux dépens des autres.
La facilité de traduction est une étape importante, mais pas la seule, vers l'accessibilité. À moins que le marquage Aria ne soit correctement utilisé, il est difficile pour les utilisateurs qui utilisent un lecteur d'écran d'obtenir une interface très dynamique. Tout cela est dû à la forte dynamique et à la popularité soudaine des interfaces WordPress basées sur JavaScript. Mais nous devons garder à l'esprit la question de l'accessibilité. J'espère que cet article vous aidera à éviter que l'internationalisation ne devienne un obstacle.