Angular Components: share variables that need to be changed dynamically

Question

I'm pretty new to Angular so I am not sure of the best way to do this. My app is going to be making a number of sparql queries. Each query is a string that will need to be referenced and manipulated prior to each post. I have two main questions.

1. What is the best way to store these queries? Are these an asset or a service?
2. How will I be able to insert other variables into these queries before posting?

Here's an example:

Query 1 = "select ?s ?p ?o where { <variable to be inserted prior to post> ?o ?p }

Answer 1

I have created a config service in the past which just has a bunch of constants for the URL, then I have just used tokens within the string to substitute variables before using. For example: var URL_getList="http://blahblah/getList?myvar={myvar};

Hope that helps. Btw please ignore bad formatting, I tried to add spaces since its code but it didnt work. I also typed this on my phone which is not easy lol.

Answer 2

You can create a template inside a function and export it, so whenever you wanna use this template of the query with different variables, you can just send to the function, and get back the modified query. here is an simple example:

export const query1 = (newVar) => {
  return `select ?s ?p ?o where { ${newVar} ?o ?p }`
}

Whenever you wanna use it, simply:

let test = query1('newVar')
console.log(test)

and it will be:

select ?s ?p ?o where{ newVar ?o ?p }

You can make all the templates of your queries in a file, and just use the specific function that you need.