A Comprehensive Guide on Implementing i18n in AngularJS 1.6

How can I properly implement i18n so that the variable "title" displays the translated value from the JSON? Currently, it is not showing anything and should return "Mis viajes". Thank you. trips-header.jade

I attempted this method but only see a "0" on the screen.

.trips-header
    .background-image
    .header-content
        p.title.ng-i18next {{   title | i18next}} 
        p.sub-title.ng-i18next {{   sub-title | i18next}}

My JSON file

 {
  "es-AR": {
      "translation": {
         "title":"Mis Viajes!",
         "sub-title": " te ayuda a planificar y organizar tus viajes."
      }
  }
}
javascriptangularjsjsoni18next

Answer №1

Below is a demonstration of how to achieve the desired HTML formatting:

<h1>{{'hello' | i18next}}</h1>

Your corresponding Jade code would be:

- var foo = "{{hello | i18next}}"
h1= foo

The translation for "hello" in Spanish (Argentina) should be as follows:

{
  "es-AR": {
      "translation": {
          "hello":"hi!"
       }
    }
}

To ensure proper internationalization in Angular, configure your application like this:

yourApp.config( ['$i18nextProvider',function( $i18nextProvider ) {
    $i18nextProvider.options = {
        lng: 'es-AR', //select or detect from browser
        useCookie: false,
        useLocalStorage: false,
        fallbackLng: 'en',
        resGetPath:  l_prefix + 'locales/__lng__/__ns__.json',
        defaultLoadingValue: ''
    }
// file is expected to be locales/es-AR/translation.json
..... remaining of the config

NOTE: Added quotes around 'hello' to treat it as text and not a variable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting objects into JSON format

I'm trying to transform an object that looks like this: { user[id]: 1, user[name]: 'Lorem', money: '15.00' } Into the following structure: { user: { id: 1, name: 'Lorem', }, money: ...

javascriptjson

Adjust grading system based on user interaction with JavaScript

I am currently working on a grading system for a website and I am attempting to modify the interpretation of grades when a column is clicked. Specifically, I am looking to convert Average (%) to Letters to 4.0 Grade Average. To achieve this, I am using Jqu ...

javascripthtml

When using AngularJS's ui-router, the onEnter function is triggered before the view has

I have nested views in my code. Here is the structure: <section ui-view id="one"></section> Next, I have a second nested view: <!--- Removed for brevity ---> <section ui-view="two" id="two"></section> And lastly, there is ...

angularjsangular-ui-router

Establishing Connections to Multiple MySQL Databases Using Node.js

I'm struggling to incorporate a dropdown menu that displays all the databases from a set host. The idea is to allow users to choose a database from the drop-down and generate a report. However, I can't figure out how to connect to the host and po ...

javascriptjquerymysqlnode.jsexpress

Unpacking JSON data with flexible data format

When consuming a JSON API in C#, I encountered an issue where the response's data structure varies based on the number of results returned from the query. To deserialize the response, I am using JSON.NET. The JSON returned by the API is as follows: ...

c#jsonjson.netzoho

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

javascripthtmlcss

What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.1 ...

htmlcssangularjsangular-ui-bootstrap

Understanding the concept of Angular factories in Javascript

app.service('WeatherService', function($http) { var service = {}; service.getLocation = function() { return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK"); }; service.getCurrentWeather = function(city) { var ...

javascriptangularjs

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

Spinning a 3-dimensional vector in THREE.js using dual axes

Apologies for potentially posting a duplicate question. I am working with two 3D vectors: Center: (0, 0, 0) Orb: (0, 0, 100) My goal is to rotate the orb-vector around the center-vector on both the X and Y axes to ensure an object is always in view of ...

javascriptvector3dthree.js

Cannot update VUEjs array following the splice operation

My array is only updating in the console and not in the DOM. I've already tried using :key but it's still not working. Here is my code: <div style="margin-top: 5px;" v-for="(file, index) in editedItem.file_name" ...

javascriptvue.jsvuejs2

Tips for refreshing a Twitter feed in real-time by utilizing AJAX requests and JavaScript

I recently started learning javascript and I'm struggling with loading a new twitter feed based on user input. Here is the code I have been working on: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /& ...

javascriptjqueryhtmlcssajax

Next.js allows for dynamic page routing using the `useState` hook to redirect users

In my Next.js project, I am using the useState hook to render different components based on the button a user clicks. The main page, called account.js in the application, contains the following code: // Importing react and getting components import React f ...

javascriptreactjsnext.js

Processing file names with Gulp

Is there a way to use the filenames retrieved from gulp.src, create in-memory files based on those names, and then pipe that stream to another destination? For example, I am looking to gather all *.styl files and add each file path to an in-memory file wi ...

javascriptconcatenationgulpstylus

The directive fails to refresh when there are modifications made to the service model

My application's model is stored in a service: angular.module('adminClient').factory('myApi', function () { var model = {}; model.myObject = { label: 'New York City' }; return { model: fu ...

angularjsangularjs-directiveangularjs-service

A comprehensive guide on parsing nested category JSON files using node.js

For my Discord application, I am utilizing the Perspective API. After sending an analysis request, the API response includes the following data: { "attributeScores": { "TOXICITY": { "spanScores": [ { ...

node.jsjson

executing npm tasks concurrently

Trying to demonstrate running npm tasks in parallel is my current task. I should be able to achieve this using "&" for parallel and "&&" for series. { "name": "npm", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "co ...

javascriptnode.jsnpm

Issue with rendering components list in React.js

I am currently working on a project using React, and I'm facing an issue where my list is not displaying on render(). In my parent component, I have a list of components coming from SearchResult. Below is the relevant portion of my code: class Create ...

javascripthtmlreactjscomponents

Fixing the Issue with React Redux Store Adding Items to Cart and Redux Logger Troubleshooting

Issue with Redux-logger not displaying actions when the add to cart button is clicked. store.js import { legacy_createStore as createStore, applyMiddleware } from "redux"; // The middleware function in between action firing and root reducer all ...

javascriptreactjsredux

Deciphering a Base64 document from a JSON reply on the user's end: What's the process?

My project involves rendering a file on the server side, where I pass it as a "base64" string via json. I am now faced with the task of decoding and downloading this file on the client side. Below is a simplified version of the code that is relevant to my ...

javascriptnode.jsjsonexpressbase64