Is the text represented in angular translate using the key instead of the value?

I've been diving into the localization section of ng-book and here's my progress so far:

1) I installed angular-translate using bower install
2) I included it in my HTML file using the script tag

<script type="text/javascript" src="js/lib/angular-translate/angular-translate.js"></script>  

3) I added the module to my Angular app

var app = angular.module('eva', ['ui.router','ngMaterial','ngMessages', 'controllers', 'factories', 'ngAnimate', '720kb.socialshare', 'pascalprecht.translate']);

4) I configured the translation provider in a separate function

app.config(['$translateProvider', function($translateProvider) {
    $translateProvider.translations({
        HEADLINE: 'EVA - eet plantaardig!',
        INTRO_TEXT: 'And it has i18n support!'
    });
}]);

5) For testing purposes, I updated a piece of code in my HTML file to display the translation

<md-button href="#/profile" layout-fill>
                  {{ 'HEADLINE' | translate }}
                </md-button>

6) However, when I run my site, instead of seeing "EVA - eet plantaardig!" as expected, it still shows "HEADLINE".

Any suggestions or insights on what might be going wrong? I'm following the book's instructions, but it seems like something isn't quite right.

Answer №1

On their official site, users are required to specify the language settings:

$translateProvider.translations('en', {
    HEADLINE: 'EVA - eat plant-based!',
    INTRO_TEXT: 'It also offers i18n support!'
});

For more information, refer to the documentation:

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

Halting the execution of a jQuery function when a condition is true

Currently in the process of building a website for my new brand, I am faced with a challenge while working with jQuery for the first time. Specifically, I am encountering issues related to the state of a specific div. The code contains if statements that ...

Establishing the module exports for the NextJS configuration file

I have explored different solutions for adding multiple plugins to the next.js config file, with composition being the suggested method. However, I am encountering issues with this approach. const Dotenv = require('dotenv-webpack'); const withSt ...

The map is not displayed on the leaflet

I am having trouble getting the map to display properly. I have added the cdn link in my head. <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="18747d797e747d6c5829 ...

Data-bind knockout select knockout bind data

Hello! I am a beginner at using knockout and I have encountered an issue with data-binds and the "option" binding. My goal is to display two drop downs populated with data from my database. Surprisingly, I have managed to get the first drop down working pe ...

Creating a dynamic multi-series line chart in D3 version 4 that incorporates data points with matching colors to their respective lines

In my attempt to enhance a multi-series line chart with D3 V4 in Angular-cli, I have encountered a challenge. Below is the code snippet of what I have been working on. var lookBookData = z.domain().map(function (name) { return { name: name, ...

Angular 4 in combination with ngx-datatable is showing a 404 error for the @swimlane/ngx-datatable package

Just starting out with Angular and I kicked things off by running this command: git clone https://github.com/angular/quickstart appName I've made the upgrade to Angular 4 and everything seems to be in order. Here's the output I got after running ...

MongoDB function failing to properly return an array

I am currently exploring an efficient method to determine if each string within an array exists on MongoDB. The specific field to be queried is the 'name' field. However, I am encountering an issue when using the function below as it returns und ...

The Benefits of Semantic Class Names compared to Microdata

As I strive to use semantic class names, my exploration of microdata and SEO raises a question: Is it necessary to use both? Compare these two HTML snippets representing an event: Using CSS classes: <div class="event" itemscope itemtype="http://schema ...

One project contains a pair of React instances

I am currently working on a React Web App and recently encountered an issue with an 'invalid hook call' error. Upon further investigation, I discovered that there are duplicate copies of the React library in my project, including within the CSS f ...

Passing default props to a component in React that includes a function as one of the

I am working on a React component that has default props set. The issue arises when I try to pass an additional prop, specifically a function. class MyComponent extends Component { constructor(props) { console.log('props', props); supe ...

Whenever I try to access my Node.js API from Heroku's live server, I encounter a CORS policy error

Whenever I try to access my Node.js API from the Angular app (running on a local setup) and host the API on Heroku's live server, I encounter the following error: CORS policy: No 'Access-Control-Allow-Origin'. Interestingly, when I host the ...

JavaScript tutorial: Locate a specific word in a file and display the subsequent word

Seeking assistance with a task: I need to open a locally stored server file, search for a specific word, and then print the next word after finding the specified one. I have managed to write code that successfully opens the file, but it currently prints e ...

Unlocking the power of variables in Next.js inline sass styles

Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...

Mix up and present cards for a game of blackjack (Javascript)

Have you noticed why "card2" is randomly adding an object to the array? It should consistently add objects to the array. const cards=[ { card: '&#127137', value: '1' }, { card: '&#127138', valu ...

The combination of curly brackets and displaying items in a list

What is the reason behind React's failure to render the list items when the arrow function objectList contains curly braces? export default function StatelessList() { const objDev = [ { id: 1, surename: "John", name: "Wayne" ...

Moving an image between different routes using a query

enter image description here I am currently working on a project where I need to take an image input file from the user and display it in another route. To achieve this, I am using query parameters. Issue: However, despite my efforts, the image is not bei ...

How can nextJS leverage async getInitialProps() method in combination with AWS S3?

I'm currently facing a challenge with executing an s3.getObject() function within an async getInitialProps() method in a nextJS project. I'm struggling to properly format the results so that they can be returned as an object, which is essential f ...

Unable to locate FFmpeg on the root server for Discord JS v13

After setting up my DiscordJS Bot on a new rootserver, I transferred all the files and launched the bot. Everything seemed to be working fine until I tried to run a command that involved the bot joining a voice channel and playing audio. At this point, an ...

Retrieve data from Last.fm API by utilizing both Node.js and Angular framework

I am currently working on implementing the node-lastfmapi track.search method into my project. I have successfully retrieved the results, but I am facing challenges in integrating them into the front end using Angular. My backend is powered by mongoDB and ...

Having trouble getting static serving to work on Express.js when custom middleware is added

Seeking assistance with creating a middleware for my express js website to incorporate subdomains and serve static image, css, and js files. While my HTML pages load properly, I encounter long page load times and the javascript files fail to load. Any gui ...