Question

当我去localhost：3000 / main / index时，我什么都没看到，我应该在mainindexCtrl.js.coffee看到博客帖子：

我在assets / javascripts文件夹中有这些文件：

angular-route.min.js
angular.min.js
underscore-min.js

的application.js：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require angular.min
//= require angular-route.min 
//= require underscore-min
//= require_self
//= require_tree ./services/global
//= require_tree ./services/main
//= require_tree ./filters/global
//= require_tree ./filters/main
//= require_tree ./controllers/global
//= require_tree ./controllers/main
//= require_tree ./directives/global
//= require_tree ./directives/main

var app = angular.module('venturelateral', ['ngRoute']);

application.html.erb：

<!DOCTYPE html>
<html ng-app="venturelateral"> 
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Rails3 Bootstrap Devise Cancan" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Rails3 Bootstrap Devise Cancan" %>">
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= yield(:head) %>
  </head>
  <body class="<%= controller_name %> <%= action_name %>">
    <div class="navbar navbar-fixed-top">
      <nav class="navbar-inner">
        <div class="container">
          <%= render 'layouts/navigation' %>
        </div>
      </nav>
    </div>
    <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12" ng-view>
              <%= render 'layouts/messages' %>
              <%= yield %>
            </div>
          </div>
          <footer>
          </footer>
        </div>
      </div> <!--! end of .container -->
    </div> <!--! end of #main -->
  </body>
</html>

的routes.rb

Rails3BootstrapDeviseCancan::Application.routes.draw do

  get "main/index"

end

mainindexCtrl.js.coffee

@IndexCtrl = ($scope) ->
    $scope.data = 
        posts: [{title: 'My first post', contents: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet lobortis vulputate. Ut tempus, orci eu tempor sagittis, mauris orci ultrices arcu, in volutpat elit elit semper turpis. Maecenas id lorem quis magna lacinia tincidunt. In libero magna, pharetra in hendrerit vitae, luctus ac sem. Nulla velit augue, vestibulum a egestas et, imperdiet a lacus. Nam mi est, vulputate eu sollicitudin sed, convallis vel turpis. Cras interdum egestas turpis, ut vestibulum est placerat a. Proin quam tellus, cursus et aliquet ut, adipiscing id lacus. Aenean iaculis nulla justo.'}, {title: 'A walk down memory lane', contents: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo sem, imperdiet in faucibus et, feugiat ultricies tellus. Vivamus pellentesque iaculis dolor, sed pellentesque est dignissim vitae. Donec euismod purus non metus condimentum porttitor suscipit nibh tempor. Etiam malesuada elit in lectus pharetra facilisis. Fusce at nisl augue. Donec at est felis. Sed a gravida diam. Nunc nunc mi, egestas non dignissim et, porta aliquam ante.'}]

应用/视图/主/ index.html.erb

<div class="container" ng-controller="IndexCtrl">
  <h1 class="text-center">My blog</h1>
  <div class="row" ng-repeat="post in data.posts">
      <h2>{{ post.title }}</h2>
      <p>{{ post.contents }}</p>
  </div>
</div>

main_controller.rb：

class MainController < ApplicationController
  def index
  end
end

Answer 1

在开发单页面应用程序时使用Ng-view，即在不重新加载的情况下替换页面内容时。
在你的情况下，你不需要它。它只是部分显示在页面中间现在，如果您绝对想要使用ng-view，则应在模板中移动渲染'布局/消息'并配置路由。 Ng-view本身应该是空的，例如＆lt; div ng-view＆gt; ＆LT; / DIV＆GT; 。
有关如何配置路由的完整说明，请参阅documentation。

angular rails app不显示视图中的数据

1 个答案: