I'm using Angular with a Rails application & my application.html.erb
in app/views/layout
folder looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Fmtemp</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= csrf_meta_tags %>
</head>
<body ng-app="fmview">
<%= yield %>
<%= javascript_include_tag "application" %>
</body>
</html>
I've another folder named: app/views/fmtest
having an index.html
coded as:
<h1> Greetings from FMView App </h1>
<a href="#/list"> List </a>
<a href="#/grid"> Grid </a>
<div ng-view></div>
Now HTML rendering of my application is quite strange:
<html>
<head>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<title>Fmtemp</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/fmview.css?body=1" media="all" rel="stylesheet" type="text/css">
<meta content="authenticity_token" name="csrf-param">
<meta content="Vwo3zN2lK8hvLPQcV3llnGnvgNqCLaHHsBubSRaYueg=" name="csrf-token">
<style type="text/css"></style></head>
<body ng-app="fmview" class="ng-scope" style="">
<h1> Greetings from FMView App </h1>
<a href="#/list"> List </a>
<a href="#/grid"> Grid </a>
<!-- ngView -->
<div ng-view="" class="ng-scope">
<title>Fmtemp</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/fmview.css?body=1" media="all" rel="stylesheet" type="text/css">
<meta content="authenticity_token" name="csrf-param">
<meta content="Vwo3zN2lK8hvLPQcV3llnGnvgNqCLaHHsBubSRaYueg=" name="csrf-token">
<h2>List View Welcomes you</h2>
<script src="/assets/angular-1.2.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-route.min.js?body=1" type="text/javascript"></script>
<script src="/assets/fmview.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
</div>
<script src="/assets/angular-1.2.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-route.min.js?body=1" type="text/javascript"></script>
<script src="/assets/fmview.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
</body>
</html>
These JS and Sylesheets are included again and again.
Now when I try to include any header or any code in my application.html.erb
It just gets repeated inside ng-view
div...
tried moving around <yield>
here and there but it's just the same, problematic.