The route to the template file within a JS script in a Symfony/Angular project

I am currently working on a project that utilizes both AngularJS and Symfony, but I'm struggling to correctly define the path of a twig template in my JavaScript code.

I need to locate: -the original JS file -the template file -the JS path using assetic

    ...
    +-src/
   | +-MyCompany/
   |   +-MyBundle/
   |     +-Resources/
   |       +-public/
   |         +-js/
   |           +-directive/
   |             +-my_file.js
   |       +-view/
   |         +-template/
   |            my_template.html.twig  
   +-web/
   | bundles/
   |   +-MyBundle/
   |     +-js/
   |       +-my_fil.js
   ...

This is the snippet of my JavaScript code:

return {
    templateUrl: '?'
}

Therefore, I was wondering if there is a way to include a path from a bundle into an asset file? (I have already tried the @bundle/ notation without success). Or, perhaps how to ensure that the js included in my HTML uses the bundle's javascript rather than the one from the asset?

Any help would be greatly appreciated. Thank you!

javascriptangularjssymfonyassets

Answer №1

That would be

{% javascripts filter='?uglifyjs2'
    '@AppBundle/Resources/assets/js/your-file.js'
    '@AppBundle/Resources/assets/js/your-second-file.js'
    '@AppBundle/Resources/assets/js/admin-*.js'
%}
    <script type="text/javascript" src="{{ asset(asset_url) }}"></script>
{% endjavascripts %}

This specific filter option allows the application of UglifyJS, as demonstrated in this snippet. The specified path connects to 

src/AppBundle/Resouces/assets/js/
and combines the listed files, enabling the use of wildcards for efficiency.

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

Adjusting the bottom property to a negative value in CSS will stretch the page downwards

I want to hide a portion of an HTML element at the bottom of the page and then reveal the entire element by sliding it upwards upon clicking with the help of CSS3 transitions. The expected behavior is for the part of the element extending below the page t ...

javascripthtmlcsscss-transitions

Django fails to send back an ajax response when using the dataType parameter set to "JSON"

My goal is to send JSON to the server and receive a CSV in return. Below is the Ajax code I am using: var data = {"data":1} $.ajax({ type: "POST", url: "api/export_csv", data:JSON.stringify(data), // dataType: "JSON", // i ...

javascriptpythondjango

Tips for preventing HTTP Status 415 when sending an ajax request to the server

I am struggling with an AJAX call that should be returning a JSON document function fetchData() { $.ajax({ url: '/x', type: 'GET', data: "json", success: function (data) { // code is miss ...

javajavascriptajaxjson

Tips for converting characters in an array to a Caesar cipher

I tried setting up an array that correlates capital letters with their corresponding Caesar cipher letters, so for example, A would shift 13 places to become N. I attempted to write a code that could generate this transformation, but I seem to have made an ...

javascriptarrays

What are some ways to prevent sorting and dragging of an element within ul lists?

A list styled with bullets contains various items. It is important that the last item in the list remains in a fixed position. I attempted to disable sorting using the cancel option of the .sortable() method, but it only prevented dragging without disablin ...

javascriptjqueryjquery-ui

How can Sequelize handle multiple foreign keys - whether it be for one-to-many relationships or many-to-many relationships

I'm working on a project with two tables: users and alerts. Users should have the ability to upvote and downvote on alerts. Here are the model definitions: Alert module.exports = function(sequelize, DataTypes) { var Alert = sequelize.define("al ...

javascriptmysqlnode.jsexpresssequelize.js

Change the object's property names from camel case to sentence case

Consider an array of objects like this: data = [{keyOne: 'value1', keyTwo: 'value2'}, {keyOne: 'value3', keyTwo: 'value4'}]; We need to change it to look like this: data = [{Key one: 'value1', Ke ...

javascriptarraysobjectecmascript-6

What is the best way to restrict user input to specific numbers only?

I have a text input field, how can I ensure that only numeric values from 1 to 31 are allowed? <input type="number" min="1" max="31"> ...

javascripthtmlcss

Adjust the background color of children based on the parent's mouseover event

Seeking a solution to fill three bars with varying percentages: <div class="bars" style="width:0%; background-color: red;"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </ ...

javascriptcss

What is the best way to prevent content from jumping around on a webpage?

After implementing a sticky header on scroll, I encountered an issue. When scrolling down by 1000px, the 'sticky' class is added to the header causing a slight jump in the content. This may be due to the header no longer visually existing in that ...

javascriptjquerycss

Performing a jQuery ajax POST request to log users in

I am currently facing a challenge with my .ajax request being made through a form for the purpose of logging in. Upon submitting my form, I am not receiving any response from either the success or error functions. Interestingly, even when I inserted an a ...

javascriptjqueryajaxpost

Navigating the ins and outs of Bootstrap 4 grids

I am trying to create a layout with two columns, each using the class col-md-6. In both columns, there are six images. However, I want to have only one image displayed in the left column if the right column is empty. How can I achieve this? The current se ...

javascripthtmlcssbootstrap-4

Replicate the process of transferring table rows to the clipboard, but exclusively copying the contents

Currently, I am attempting to copy a paginated table to my clipboard by referring to this guide: Select a complete table with Javascript (to be copied to clipboard). However, the issue lies in the fact that it only copies the data from the first page. In ...

javascriptjqueryangularhtml-tableclipboard

The split function in JavaScript is exhibiting some unusual behavior

There is something wrong with my code challenge1 = () => { var data = fs.readFileSync('santa21.txt', 'utf8'); data = data.toString(); dataSplit = data.split(' ') console.log(dataSplit); }; challenge1(); The result of the ...

javascriptarraysfunctionsplit

What is the purpose of enclosing Arrow function body in parentheses?

While looking through a tutorial on survivejs, I came across a code snippet featuring a function with its body enclosed in parentheses: export default () => ( <ul> {notes.map(note => //some code )} </ul> ) The ...

javascriptreactjsecmascript-6returnarrow-functions

Trouble with Bootstrap 5 hidden elements and jQuery fading in and out smoothly

Utilizing Bootstrap 5, I want to implement a fade in/out effect on a specific div element. jQuery offers a handy function called fadeToggle() for achieving this, so I decided to give it a try. The desired functionality is as follows: The div element star ...

javascriptjquerytwitter-bootstrapbootstrap-5

Obtaining a Jquery object for a particular class with a specific value

I'm looking to retrieve a specific Jquery object with a particular class and value. Let's say I have these input tags with the class "track-interval". <input type="radio" class="track-interval" value="1" name="interval" /> <input type= ...

javascriptjquery

Combining Django with the powerful Vue3 and lightning fast Vite

I'm in the process of upgrading my multipage app from Vue2 with webpack to Vue3 with Vite. After successfully rendering my Vue3 components on my Django templates, I am now facing a challenge - setting component variables on the Vue app using the Djan ...

javascriptvue.jsvuejs3vite

Is there a way in Bower to automatically select only CSS or JS files from an open source project, rather than both, if that is my preference?

Although I suspect the answer, imagine I desire to incorporate the CSS from Twitter Bootstrap without the Javascript. I've set up a gulp script to extract everything from my bower.json file, minimize the JS, compress the CSS, and transfer it to my de ...

javascriptcssnpmgulpbower

customizing configurations for different environments in AngularJS

Currently, I am in the process of developing a website using Angularjs and WebAPI as the backend support within Visual Studio. In my app.config.js file, I have defined the URL to the WebAPI as an app constant: var serviceBase = 'http://localhost ...

angularjsasp.net-web-api