Transmitting data from the backend to AngularJS during page load

After diving into Angular JS for the first time, I've hit a roadblock at an essential stage. My setup consists of an AngularJS front end and Grails backend. Check out the code snippets below along with my query.

  1. URL Mapping entry:

as

"/graph"(controller: 'Graph')
  1. This is my Grails controller/action which renders the GSP:

as

class GraphController {
    def index() {
        render(view: "../graph", model: [employeeId: "197040"])
    }
}
  1. This is the AngularJS file, saved as graph.gsp:

Upon visiting the URL: hostname:port/graph I can see the message "Hi ! Welcome" displayed. However, I'm struggling to find a simple way to retrieve the employeeId and show it as "Hi ! Welcome 197040" (i.e., accessing the employeeId variable sent from the backend)

<div><h3>Hi ! Welcome {{employeeId}}</h3></div>
did not yield the desired outcome.

I apologize if this seems like a fundamental question, but I have yet to come across a clear solution anywhere.

javascriptangularjsgrails

Answer №1

Give this a shot:

<div ng-init="employeeId=${employeeId}"><h3>Hello there! Welcome {{employeeId}}</h3></div>

This will set the employeeId value from GSP context to a variable accessible in Angular context. Check the HTML source generated in your browser to see it in action.

By doing this, the employeeId variable can also be accessed within your Angular controller scope.

If you want to learn more about using Angular with Grails, check out this helpful tutorial:

Answer №2

Your Angular application operates within the user's browser and is unable to directly access your backend system. Simply defining employeeId as a backend environment variable will not grant Angular the ability to retrieve it.

There are two potential solutions to this issue:

1) Within the index view (/graph), display employeeId as a global JavaScript variable within a script tag. Then, in Angular, declare employeeId as an Angular value. This will allow you to inject the employeeId value into your Angular controller for display within the Angular view.

2) Before initializing your Angular app, asynchronously fetch the employeeId via Ajax and define it as an Angular value. You can then inject it into your controller. I recently published a blog post detailing how this process can be accomplished:

Answer №3

One thing to note here is that in GSP, your Grails variables will function just as you have defined them in the layout.

<div><h3>Hello there! Welcome ${employeeId}</h3></div>

This means that Grails will be responsible for sending that information back to you.

Another option is to follow the example provided by a service on this demo site: https://github.com/vahidhedayati/testingarrested/blob/master/grails-app/assets/javascripts/testingarrested/arrestedServices.js

You may want to experiment with the arrestedplugin yourself as a demonstration, and then adapt the above service example to suit your own needs.

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

Aligning text to the right in Bootstrap 5 input fields

I'm trying to align the values of my inputs to the right. Any suggestions on how to achieve this? Here's a visual representation of what I'm looking for. This is the snippet from my code: <td style="text-align:center; vertical-alig ...

javascriptcssinputtext-alignbootstrap-5

What is the recommended placement for the implicitlyWait method in Protractor?

When implementing implicitlyWait, what is the appropriate location to include browser.manage().timeouts().implicitlyWait(5000); within the test script? ...

javascriptangularjsprotractorwait

A Multilingual Application developed using either AngularJS or the Ionic Framework

Having recently delved into both AngularJS and the Ionic Framework, my background is primarily in Microsoft technologies. I am currently working on developing an app that supports three languages: English, Arabic, and French. Drawing from my experience wi ...

javascriptc#angularjsionic-framework

Discover the art of concurrently listening to both an event and a timer in JavaScript

Upon loading the page, a timer with an unpredictable duration initiates. I aim to activate certain actions when the countdown ends and the user presses a button. Note: The action will only commence if both conditions are met simultaneously. Note 2: To cl ...

javascripthtml

Ways to retrieve a grandchild element of a specific element using its tag name

I'm struggling to access elements that are nested within various levels of parent elements with and without IDs. The usual method getElementByTagName doesn't seem to be working for me, especially when the target element is three levels deep. Is t ...

javascript

The error message "E/Web Console(8272): Uncaught ReferenceError: functionName is not defined:1" popped up when trying to load web views within a

I'm working on incorporating webviews into a view pager. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = null; v = inflater.inflate(R.layout.webview_l ...

javascriptandroidjquerywebviewandroid-viewpager

Create data according to jQuery's AJAX data method

When editing in place using jQuery, if the code snippet seems too complicated, please refer to a simpler one. 'column2' => "RAJANgsfdgf" 'column3' => "SRARDHAMgsdfgdf" 'column4' => "40043433" 'column7' =&g ...

javascriptjqueryjquery-plugins

AngularJS module dependencies configuration functions smoothly during initialization

The structure of my modules looks like this: angular.module('mainModule',["cityModule", "countryModule"]); angular.module('mapModule',[]); angular.module('cityModule',["mapModule"]); angular.module('countryModule',[ ...

javascriptangularjsangularjs-directive

The .NET controller does not receive traffic for the GET method

Having some trouble populating a table with JSON data using angular ng-repeat. No errors are showing up in the console, and my breakpoint in the .NET Controller isn't being triggered. Here's the code for the App Controller: var app = angular.mo ...

javascriptc#angularjsasp.net-core

Capture individual frames from angular video footage

Trying to extract frames from a video using Angular has been quite challenging for me. While browsing through Stack Overflow, I came across this helpful post here. I attempted to implement the first solution suggested in the post, but unfortunately, I was ...

javascriptangulartypescript

Transforming data structures into arrays using Javascript

Could someone help me with converting the following code snippet? const words = {told: 64, mistake: 11, thought: 16, bad: 17} I need it to be transformed into: const words = [ {text: 'told', value: ...

javascriptreactjs

Is there a way to automatically refresh a webpage whenever there are changes

Currently, I have a webpage that operates like a reverse auction, complete with a javascript countdown timer that tracks the time remaining in the auction. Once the timer reaches zero, the auction ends and the page automatically refreshes. While everythin ...

phpjavascriptmysqlajax

Show the output of a MySQL query on a modal, alert, or popup box within a webpage initiated by a search box, with the option to close the

Having worked in IT for 16 years, I am new to coding and seeking help on displaying search results from an input HTML box. I want the data from a MySQL database to be displayed in a modal, alert, or popup box with a closing "X" button. This database only c ...

javascriptphpmysqlbootstrap-modal

The AJAX response consistently returns a 405 status code

I am experiencing an issue with an AJAX post request. $.ajax({ type: "POST", contentType: "application/json", url: "/rating/save", data: JSON.stringify(rating), dataType: "json", mimeType: "application/json" ...

javascriptjavaajaxspringspring-mvc

Error: JSON array contains unterminated string literal

Hey there, var favorites = 'Array ( [0] => [" 6 "," 1 "," 2 "," 5 "," 3 "," 4 "] [1] => [" 6 "," 1 "," 2 "," 5 "," 3 "," 4 "] [2] => [" 6 "," 1 "," 2 "," 5 "," 3 "," 4 "] ) '; I've been encountering a syntax error - an untermi ...

javascriptjson

I am interested in utilizing Sequelize, Vue, and Node to implement a query that filters data once it is retrieved to display on my view

Within my project, there's a table tracking user responses to a quiz. By utilizing the following query, I've successfully retrieved all the information from that table and stored it in my TotalQuizResponses array for display: this.totalQuizRespon ...

javascriptnode.jsvue.jssequelize.js

Learning to access a base64 encoded PDF file using JavaScript

var ajaxSettings = { url: urls.orders.list+"/"+singlePacket.requests[0].order_id+"/labels", //retrieve labels with ShipperAssigned status type: "GET", contentType: "application/json", headers: { "Authorizatio ...

javascriptjquerypdf

Querying two MongoDB collections simultaneously to locate a user based on their email address

I am working with two different collections, tutors and users, within my MongoDB database. Within the controller, I have a function called signin. In this function, I need to modify the condition so that it searches for a user in both the tutors and users ...

javascriptnode.jsmongodbexpressmongoose

Firefox throwing an error with jQuery URL Get requests

Could someone help me understand why my JavaScript function is triggering the error function instead of the success function in Firefox on Ubuntu? $(document).ready(function() { console.log( "Begin" ); $.ajax({ type: "GET", dataType: "ht ...

javascriptjqueryfirefox

Ways to incorporate useEffect within a function or the other way around

Currently, I am facing an issue with my code. I have a function that handles the onChange event to retrieve the input value. Additionally, I have another function that searches for items in an array based on the value from the input and then renders a comp ...

javascriptarraysreactjs