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>