1

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>&nbsp;
<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>&nbsp;
        <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.

4

2 回答 2

1

Where are your angular templates being served from?

If they are being served through routes/controllers/view (and not the public directory) they will be served with another layout template, thereby duplicating the layout like you show here -- 1 layout for the rendered page + 1 layout for the ng-view template url.

To work around this add the below to the controller.rb file your ng-view templates are serving through.

layout false

Or serve the angular templates from the public folder.

于 2013-11-17T16:49:26.900 回答
0

Try this change;

<!DOCTYPE html>
<html ng-app="fmview">
<head>
  <title>Fmtemp</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= csrf_meta_tags %>
  <%= javascript_include_tag "application" %>
</head>
<body>
<%= yield %>
<div ng-view></div>
</body>
</html>
于 2013-10-28T08:50:28.550 回答