Rails not recognizing Bower components

I have integrated angular and bootstrap into my Rails application using bower, but the JavaScript is not rendering properly.

Both CSS and Java Script are not functioning

Here is the code snippet:

vendor\assets\javascript\application.js

//= require angular/angular
//= require_tree .
var receta = angular.module('receta',[
]);
receta.controller('mainc',['$scope',function($scope){
    $scope.status = "AAA";
}]);

application.rb

require File.expand_path('../boot', __FILE__)    
require 'rails/all'
Bundler.require(*Rails.groups)

module Receta
  class Application < Rails::Application
    config.assets.paths << Rails.root.join("vendor","assets","bower_components")

    config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap","assets","fonts")
    config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff|woff2)$)

    config.active_record.raise_in_transactional_callbacks = true
  end
end

app\views\home\index.html.erb

<div class="container-fluid" ng-app="receta">
  <div ng-controller="mainc" class="panel panel-success">
    <div class="panel-heading">
      <h1 ng-if="name">Hello, {{status}}</h1>
    </div>
    <div class="panel-body">
      <form class="form-inline">
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Enter your name" autofocus ng-model="status">
        </div>
      </form>
    </div>
  </div>
</div>

application.html.erb - layout

<!DOCTYPE html>
<html>
<head>
  <title>Receta</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

Answer №1

Be careful! You have two files with the same name being included:

vendor/assets/javascript/application.js
and
app/assets/javascript/application.js
. This can cause conflicts and lead to potential issues down the line.

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

"Embrace the powerful combination of WinJS, Angular, and TypeScript for

Currently, I am attempting to integrate winjs with Angular and TypeScript. The Angular-Winjs wrapper functions well, except when additional JavaScript is required for the Dom-Elements. In my scenario, I am trying to implement the split-view item. Although ...

Issue with Chrome extensions: encountering 'variable undefined' error in the extension despite it being defined in the console

Within my chrome extension's content scripts, I have implemented a dynamic loading mechanism for an external JavaScript file onto an HTML page once it has finished loading. This JavaScript file is responsible for defining a variable called rfk. I have ...

What is the most effective approach for handling user input delays with Async promises?

New to Vue.js and currently exploring the following challenge: I have a component named PopUp which can be displayed or hidden using functions of the same name. My goal is for the popUp.show() function to return a promise that contains information about ...

Creating a redirect button using React Material UI and React Router

I've been exploring how to use Material-UI with React and I'm struggling to figure out the best way to redirect to other pages or components. After reading various articles on different methods of redirection using react-router-dom, I still have ...

Developing an android application that handles a specific format of JSON data

I have received a JSON in the following format: var list=[{"Name":"arun","City":"xyx","CountryName":"KUWAIT"},"Name":"Amal","City":"abb","CountryName":"BAHRAIN"}]; This JSON is sent from my web server to my Android app as a String value. I need to conver ...

"Utilizing JavaScript to parse and extract data from a JSON

I just received a JSON object through a PHP get request and it has the following structure: data == {"user_id":"7","emp_type_id":[{"0":"11","1":"10"}]} My main focus right now is to retrieve the values within emp_type_id, which are "11" and "10" in this ...

The passed index in the Vue component does not match the anticipated values

This is the code snippet for my custom component: <template> <span class="pt-3"> <GoodMacroElement v-for="goodMacro in goodMacroData" :macro="goodMacro" :index="counter++" class="row m ...

Analyzing the current time against a user-inputted time using Javascript

Looking at this html and javascript code, the goal is to compare an input time with the current time. If the input time is less than 2 hours, "Less time" should be displayed in the label; if it's more than 2 hours, then "sufficient time" should appear ...

Close the Hopscotch modal when moving to the next step or reaching the end

I'm having trouble figuring out how to close the modal after opening it. Initially, I can open the modal successfully using the following code: onNext: function() { $('#modal').modal('toggle'); } However, when attempting to cl ...

Refresh the homepage of a website using React Router by clicking on the site's logo from within the Home component

In most cases, when you click on a website's logo while on the homepage, it typically reloads the page. However, with React, clicking on the logo while already on the Home component does not trigger a reload. Is there a way to work around this issue? ...

Creating a sleek horizontal drop-down navigation menu using Bootstrap 5 and CSS

Attempting to design a horizontal dropdown menu for small screens has been a challenge. However, all the resources I've come across seem to be outdated and ineffective. ...

Comparing time in string format using a MongoDB aggregate query

My database has the following data stored: collection name: movies: [ {id:1, name:"abch", start:"12:00 pm", end:"03:00 pm"}, {id:2, name:"Annabelle", start:"08:30 am", end:"10:00 am"}, {id:3, name:"Spider Man homecoming", start:"11:30 am", end:"03:0 ...

Implementation of SpotLight rotation using three.js

Currently, I am attempting to rotate a spotlight using the following code: var light = new THREE.SpotLight( color, intensity, distance ); light.position.set( 0, 100, 0 ); light.rotation.set( 0, Math.PI, 0 ); light.shadowCameraFar = 50; light.shadowCamer ...

What is the process for configuring browser environment variables in Next.js with the `"type": "module"` setting?

While working on my nextjs project, I have encountered an issue with setting environment variables that can be accessed at the browser level. Whenever I use console.log(process.env), it always returns {} in the javascript console, and any variable like pr ...

Using jQuery to add elements to another element

My goal is to create a button that, when pressed, will change the theme color on my jQuery mobile test site. Imagine my HTML parent div looks like this: <div id="firstPage" data-role="page"> I want to be able to click the button and have it add da ...

Explore the differences between user input and JavaScript

There seems to be an issue with the second output result. var compareNumber = 3; // Code will be tested with: 3, 8, 42 var userNumber = '3'; // Code will be tested with: '3' 8, 'Hi' /* Enter your answer here*/ if (userNum ...

Is there a method to distinguish a true VR HEADSET from a device that simply allows VR capabilities?

I've been on the hunt, but haven't had any luck finding a solution. I'm currently working on a three.js WebGL VR experience and I want to restrict access to VR headsets only, excluding mobile phones. Right now, the only thing I can detect i ...

How to Implement Recursive Function Calls in JavaScript?

My goal is to create an interactive function using HTML and jQuery. I am utilizing jQuery to update and change attributes and text for a more seamless experience without page reloads, especially since it's not image-heavy. I have structured "scenes" ...

Automatically update certain attributes of an object with Spring MVC's auto-refresh feature

Currently, I have a table in JSP where I am populating all object attributes using Spring MVC. The backend is providing a list of DTO's which are then being added to the ModelView. In the JSP, we iterate through this DTO list and display it in the tab ...

There seem to be some issues arising from the Angular Chain HTTP component

I've been working on migrating data from one database to another in an angular.js application, and I am facing some challenges with the code. The specific issue arises when trying to obtain authorization credentials for sending POST requests to the re ...