How to pass Rails variable to AngularJS config - javascript

In my Angular app config I have:
$httpProvider.defaults.headers.common['Custom-Auth-Token'] = ____;
$httpProvider.defaults.headers.common['Custom-Auth-Signature'] = ____;
These headers are necessary in order to make ANY API requests to the Rails backend server.
On my Rails backend, I'm using Sorcery and have access to current_user.authentication_token in my controller/views. I thus need to pass this to the angular config.js.erb. Is this even possible?
Another issue I have is that the auth-token will then be hashed with an app secret (this is only available on the Rails server and shouldn't ever be seen in the JavaScript), which becomes the auth-signature. How do I perform this action on the rails side, then pass this to Angular's config?

You could put this information in data attribute of a HTML tag. From the Angular app in your frontend you just have to fetch this tag with his id and get the data from it.

Related

In express Node JS , how do I handle a request in which the user requests both a HTML page and a sends a request parameter?

I am creating a web app where a user can type in /poll/:id in order to retrieve a poll with the given id from my database. Presumably, in order to do this, my Node JS express server would first need to send over the HTML I want the poll to be displayed on, the JavaScript that handles the frontend and then JSON data representing the poll.
I am running into a roadblock because I have no idea how to handle such a request. As a jumping off point, I tried to make my server simply send over the html page in question upon receiving the request (and hence not using express's static server). The code is as follows:
app.get('/poll/:id', function(req, res, next){
res.sendFile('poll.html');
});
However, the page on the user's end does not handle any of the CSS, hence the page is not styled at all upon being sent to the user, nor is the frontend JS supported. What exactly do I have to do in order to ensure all of that is functional in the frontend? Is there an easier approach to this that I am not realizing?
If you want to generate the HTML on the server-side, use a templating engine, ejs for example. There u would be able to retrieve the data from the database and easily render the page according to that data.
On the other hand, if you want to retrieve the data using javascript then just serve the HTML files statically, and then create another route which would only respond with the JSON object retrieved from the database, (which the frontend would request), and then the frontend-javascript would render the application

how to access database object from another server in client sid

I have working on project that using Django.I have render some data as json format with httpresponse in url like this "1.1.1.1:8080/data". and get data with javascript and AJAX in client side, I should mention that this server have no access to intenet and it work in internal network of our company. this work prefect. but another server like 'example.com' want to render my html and i manage it, this work well but the data "1.1.1.1:8080/data" do not load and return error on pinging.
so is there any solution to make access my django app load data on 'example.com'.
best regarads

How to inject server variable to a client side js/html file

How can a Javascript variable set on a server(via properties file) be injected to an Angular js/JavaScript app?
There is a Java Jersey application that has client files (js, HTML, CSS, etc.) under the /src/main/webapp folder and there is a javascript variable that I would want to set before it gets served to the client. For example , please consider the following:
<script type="text/javascript">
var serverHost = "<%serverHost%>";
</script>
How can I replace the value of "<%serverHost%>" String with a value of my choice that will be evaluated at runtime? Preferably via properties.
The goal of this is that the client has Rest calls and the URL cannot be relative and has to be full because the application will be accessed via a different/middle man server, so ultimately the rest calls need to reach the originated host server. The value is need via a properties file so the application/same build can work on different environments.
Would appreciate any ideas.
Thank you
The problem you are trying to solve needs server side rendering.
In your case, for example,
You can retrieve the host URL from the properties file on the server side, pass it to the view using the controller, and in the view, using JSP tags, generate an HTML for which the serverHost variable is dynamically set
HOWEVER....
As you are using AngularJS, this type of rendering is clearly against Angular's philosophy.
You can create a constant in angular,
angular.module('myApp').constant('SERVER_URL', 'http://localhost:8000/');
You can set the value of this constant during the build.
OR
You can create a simple API where you'll retrieve the host url value from the properties file, preferably in JSON format, then you can simply call that API to set this constant value.

How to "refresh" a single page application

Suppose I have a single page application that makes AJAX requests to http://www.somesite.com/resources?lang=en.
Now, let's say that my application has a special variable for the request's languages, that is, if the variable's value is en, then the AJAX request will send a query param lang=en.
For now, the two possible values are en and es.
This variable's value can be changed dynamically by the user (clicking a button).
So, if we are using the application with language = en, then the application will send the lang=en query parameter. If the user changes the language to es, then I want the application to resend all the AJAX requests but now with lang=es query parameter.
It would be like refreshing the website, but asynchronously via AJAX requests.
I have been thinking this yesterday and I can't find a way to handle this logic in an AngularJS application.
I'm not an expert in AngularJS, but I understand the concepts of modules, directives, services and controllers.
What would be the best approach to handle this scenario? That is, I would like to avoid having to call each AJAX request manually, I'd rather create an automatic way of doing this.
Have you tried any AngularJS plugins?
First that comes to mind is Angular translate
Best way to concate the ajax url with lang parameter and request again.
So you will get all new data base on lang parameter, won't forget to handle cache before requesting the ajax call.

knockout.js external model js file

I have an MVC.NET app which using Knockout.js (+ knockout.mapping) to deal with some cascading dropdowns. The data for these comes from a WebAPI call to an external service. As it happens this service requires an authentication token which expires after 2 hours, so I have the MVC app put the data from the service in a System.Web.Caching.Cache and return it from there unless the token has expired where it will grab it again from the service.
This is working fine.
However when I need to get this to the View, I am currently using the following method, which is to have a property of the ViewModel that I assign the service/Cache data to and then do this in the view:
var model = new ViewModel(#Html.Raw(Json.Encode(Model.ReferenceData)))
ko.applyBindings(model);
where Model.ReferenceData is the data from the service.
again this is working fine, but... the thing is with this, that the page then has all that Json data dumped in it on each request.
I would like to use an external JS file for the ReferenceData as then at least it can be cached by the browser and lessen the weight of the page on future requests.
However, I imagine that the overhead of generating a JS file is not that small, along with – what I really need is it to generate a link to that file that changes in much the same way that the built in MVC bundling of js files works – generating a link with a querystring.
My question is: is there an easy way of doing this?
For sure I can, when the cache is filled that first time, generate a js file and reference that from the View, but as I say getting that to change its link each time it is refreshed – or at least working out whether the data in it has changed and updating it only then is where the problem lies.
Any insight to this would be of great help
Thanks
Nat
Version the JS file (you can keep a GUID in the file it-self).
In Application_Start() get this version ID to a static variable.
In your controller pass this static variable data to ViewBag.
Ref your script with this ID
When you regenerate the file, update the version in file as well as your static variable. Next request from the client get the new version with new key.
Now if you want to update clients on the new version you have to use bi-directional protocol like web sockets or long-polling.

Categories