Fatal编程技术网
  • javascript/
  • Javascript angular rails应用程序未在视图中显示数据

Javascript angular rails应用程序未在视图中显示数据

javascript ruby-on-rails ruby-on-rails-3 angularjs

Javascript angular rails应用程序未在视图中显示数据,javascript,ruby-on-rails,ruby-on-rails-3,angularjs,Javascript,Ruby On Rails,Ruby On Rails 3,Angularjs,当我转到localhost:3000/main/index时，我什么也看不到，在那里我应该可以看到mainindexCtrl.js.coffee中的博客帖子： 我的资产/javascripts文件夹中有以下文件： angular-route.min.js angular.min.js underscore-min.js application.js: //= require jquery //= require jquery_ujs //= require bootstrap //= requ

当我转到localhost:3000/main/index时，我什么也看不到，在那里我应该可以看到mainindexCtrl.js.coffee中的博客帖子：

我的资产/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']);

<!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>

class MainController < ApplicationController
  def index
  end
end
application.html.erb:

//= 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']);

<!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>

class MainController < ApplicationController
  def index
  end
end
mainindexCtrl.js.咖啡

@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.'}]
app/views/main/index.html.erb

Rails3BootstrapDeviseCancan::Application.routes.draw do

  get "main/index"

end

<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>


我的博客
{{post.title}}
{{post.contents}
主控制器。rb:

//= 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']);

<!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>

class MainController < ApplicationController
  def index
  end
end

class MainController
Ng视图是在开发单页应用程序时使用的，也就是说，当您希望在不重新加载的情况下替换页面内容时
在你的情况下，你不需要它。这只是一个部分，将显示在页面中间。 现在，如果您确实想使用ng view，您应该在模板中移动渲染“布局/消息”并配置路由。Ng视图本身应为空，例如
有关如何配置路由的完整说明，请参阅。

源代码是否为空？或者您只是在浏览器窗口中看不到任何东西？为什么使用ng view？我找不到角度路由的任何配置，我正在学习教程。我通过包含angular resource使其工作，然后用以下内容替换application.js文件中的底线：angular.module（'VentureAlteral'，['ngResource']），实现了这一目的。不过，我确实找到了使用ng view的方法。我在application.js文件中包含angular-resource.js，而不是application.js文件底部的这一行：angular.module（'venturelateral'，['ngRoute']）；我这样做了：angular.module（'venturelateral'，['ngResource']）