Parrainé par l'interface utilisateur de Kendo pour l'équipe Angular

Vous souhaitez en savoir plus sur la création d'excellentes applications Web angulaires? Tout commence avec Kendo UI for Angular – une bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux listes déroulantes et jauges.

L'équipe de Kendo UI for Angular s'engage à vous fournir les derniers conseils et astuces dans le monde du développement angulaire. Nous espérons que vous apprécierez le post!

Dans ce post, vous découvrirez l’internationalisation et la localisation, la bibliothèque de traduction de ngx et son installation dans votre application Angular. Vous verrez également des instructions pas à pas sur la façon de travailler avec plusieurs langues ou locales.

Dans ce didacticiel pas à pas, je vais vous montrer comment créer un projet Angular et utiliser un ngx- traduire la bibliothèque pour la localisation. Ce tutoriel couvre les sujets suivants:

• Qu'est-ce que l'internationalisation et la localisation?
      
• Qu'est-ce que ngx-translate?
      
• Créer un projet angulaire
      
• Installer la bibliothèque ngx / translate
      
• Mise en place du projet Angular
      
• Comment utiliser ou travailler avec la localisation
      
• Comment obtenir la langue du navigateur
      

Que sont l'internationalisation et la localisation?

“En informatique, l'internationalisation et la localisation permettent d'adapter un logiciel informatique à différentes langues, aux particularités régionales et aux exigences techniques d'un environnement local cible.”

– Wikipedia

Qu'est-ce que ngx-translate?

ngx-translate est la bibliothèque pour l'internationalisation (i18n) et la localisation en angulaire. Il simplifie votre application angulaire pour travailler pour la localisation. Il est facile à installer et à utiliser dans une application angulaire. (Pour plus de détails, visitez GitHub .)

Créer un projet angulaire

Voici les étapes à suivre pour créer l'application Angular à l'aide de la CLI:

1. Créer un projet angulaire à l'aide de la commande CLI suivante .

> Nouvelle démonstration de localisation angulaire

2. Une fois cette commande CLI exécutée, passez ensuite au chemin de projet créé à l'aide de la commande suivante:

> cd my-localisation-demo

3. Exécutez facilement l'application créée à l'aide de la commande suivante. Il ouvre directement l'application Angular dans le navigateur.

> ng serve -o

4. Le navigateur affichera la sortie sous l'image ci-dessous.

Installer la bibliothèque ngx-translate

Voici les étapes pour installer la bibliothèque ngx-translate:

1.     Ouvrez une invite de commande et accédez au chemin de votre application.
       
2. Tapez la commande ci-dessous pour installer le module npm:
       

> npm installer @ ngx-translate / core --save

3.     

   Il n'y a pas de chargeur disponible par défaut. Vous devez faire la traduction manuellement en utilisant setTranslation il est donc préférable d’utiliser un chargeur. Vous pouvez utiliser le chargeur de deux manières: Vous pouvez créer votre propre chargeur personnalisé ou utiliser le chargeur existant fourni par la bibliothèque ngx-translate . Dans cet exemple, nous en utilisons un existant.

       

4. Pour utiliser le chargeur existant, tapez la commande ci-dessous pour installer le module:

       

> npm installer @ ngx-translate / http-loader --save

5. Enfin, nous en avons terminé avec la partie installation. Nous pouvons maintenant voir comment l'utiliser dans une application angulaire.

Configurer le projet angulaire

Pour utiliser la bibliothèque ngx-translate dans l'application Angular, procédez comme suit.

1. Ouvrir app.module.ts fichier et importez les modules de traduction et de chargement comme indiqué dans le code ci-dessous:

 import {BrowserModule} depuis '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
import {AppRoutingModule} depuis './app-routing.module';
importer {AppComponent} depuis './app.component';
// import du module de localisation
importer {TranslateModule, TranslateLoader, TranslateService} à partir de '@ ngx-translate / core';
importer {TranslateHttpLoader} de '@ ngx-translate / http-loader';
importer {HttpClientModule, HttpClient} depuis '@ angular / common / http';

// module de chargement
fonction d'exportation HttpLoaderFactory (http: HttpClient) {
  renvoyer le nouveau TranslateHttpLoader (http, './assets/i18n/', '.json');
}

@NgModule ({
  déclarations: [AppComponent],
    importations: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide:  TranslateLoader,
          useFactory:  HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ],
    exportations: [TranslateModule],
    fournisseurs: [TranslateService],
    bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

2.     Dans le code ci-dessus, vous pouvez voir que nous avons utilisé useFactory à condition que la fonction HttpLoaderFactory soit utilisé pour la traduction automatique et que le chemin de fichier locale.json soit charge.
       
3. Il charge les traductions de « / assets / i18n / [lang] .json ». Ici ‘[lang]’ est la langue que nous utilisons; par exemple, pour le néerlandais, ce serait nl .
       
4. Créez le fichier .json dans le chemin ci-dessus. Ici, vous pouvez créer de nombreux fichiers de langue que vous souhaitez prendre en charge dans l'application. Dans cet exemple, j'ai créé deux fichiers – le premier est anglais (en.json) et le deuxième néerlandais (nl.json) .
       
5. Enfin, nous avons mis en place la bibliothèque ngx à utiliser dans notre application Angular.
       

Comment utiliser ou utiliser la localisation

Jusqu'à présent, nous avons vu comment créer un projet Angular, installer la ngx-library et l'installer dans le projet Angular. Ensuite, nous allons apprendre à jouer avec les composants utilisant la bibliothèque. Voici les étapes de base simples pour la localisation.

1. Ouvrez le fichier app.component.ts importez TranslateService et injectez ce service dans le constructeur pour la traduction. .

 import {Component} from '@ angular / core';
importer {TranslateService} de '@ ngx-translate / core';

@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

classe d'exportation AppComponent {
  title = 'angular-localization-demo';
  constructeur (traduction: TranslateService) {}
}

2. Ensuite, ajoutez les deux lignes ci-dessous dans constructeur pour définir la langue par défaut pour la localisation et l'utiliser.

 translate.setDefaultLang ('en');

translate.use ('en');

3. Dans cette étape, nous allons définir la traduction dans le fichier .json à utiliser dans la localisation. Voici la syntaxe pour ajouter des traductions dans le fichier .json ; nous stockons au format paire de clés-valeur.

 {
  "WelcomeMessage": "Bienvenue dans la démonstration de localisation angulaire"
}

 {
  "WelcomeMessage": "Welkom bij de demo voor hoeklokalisatie"
}

4. Ensuite, nous sommes prêts à jouer avec. Nous allons changer le titre actuel Bienvenue dans angular-localization-demo! en traduction traduite. Nous utilisons ce service de traduction comme un tuyau en HTML. Le code ci-dessous montre comment utiliser en HTML; ajoutez-le dans le fichier app.component.html .

   {{'WelcomeMessage' | Traduire }}!

5.     

   Dans le code ci-dessus, vous pouvez voir que [ WelcomeMessage "est la clé du fichier .json comme nous l'avons vu à l'étape précédente qui suit pipe symbole et objet du service de traduction.

       

6. Enfin, nous avons terminé avec les changements. Maintenant, lancez l'application avec la commande suivante.

       

> ng servir -o

7. Une fois que vous avez exécuté la commande ci-dessus, la sortie apparaît sous l'image ci-dessous dans le navigateur.

 this.translate.setDefaultLang ('nl');
this.translate.use ('nl');

Une fois que vous avez changé comme indiqué ci-dessus et vérifié dans le navigateur, vous verrez apparaître le résultat sous l'image ci-dessous.

Comment obtenir la langue du navigateur

Dans les étapes précédentes, nous avons vu que nous avons directement défini le langage dans le constructeur à l'aide des deux instructions ci-dessous:

 this.translate.setDefaultLang ('nl');
this.translate.use ('nl');

Mais si vous voulez que la localisation de vos applications fonctionne sur la base de la langue du navigateur, alors quoi? Utilisez la méthode ci-dessous de TranslateService pour que la langue actuelle du navigateur définisse la langue par défaut.

 const currentLanguage = this.translate.getBrowserLang ();
this.translate.setDefaultLang (currentLanguage);
this.translate.use (currentLanguage);

Une fois que vous avez terminé avec les modifications ci-dessus, lancez votre application. Il obtiendra votre première langue de navigateur et l'appliquera à la bibliothèque. Si vous souhaitez rechercher d'autres langues, changez la langue de votre navigateur de l'anglais au néerlandais, redémarrez le navigateur et appuyez sur l'URL de l'application. Il définira le néerlandais comme langue par navigateur.

Remarque: cette application de démonstration ne fonctionne que pour l'anglais et le néerlandais. Si vous souhaitez utiliser une autre langue, vous devez ajouter ce fichier JSON et le définir comme langue par défaut.

Vous pouvez également télécharger cet exemple à partir de ici .

Conclusion

Dans cet article, nous avons discuté de ce que ngx_translate est et comment l’utiliser dans des applications angulaires. Après cela, nous avons vu comment travailler avec les langues du navigateur. Si vous avez des suggestions ou des questions concernant cet article, n'hésitez pas à me contacter.

“Apprends-le, partage-le.”