Question

我正在按照本教程https://thinkster.io/angular-rails在RoR上设置角度js。我被困在这里因为它没有在assets / javascripts / home / _home.html中呈现home.html部分呈现。浏览器显示空白屏幕，即使我在_home.html中添加了html和angular。请帮帮我

app.js

angular.module('flapperNews', ['ui.router','templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl',
      resolve: {
        postPromise: ['posts', function(posts){
        return posts.getAll();
    }]
}
    })
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts/_posts.html',
      controller: 'PostsCtrl'
    });

  $urlRouterProvider.otherwise('home');
}])

的application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-router
//= require angular-rails-templates
//= require_tree .

_home.html

<script type="text/ng-template" id="/home.html">
    <div class="page-header">
      <h1>Flapper News</h1>
    </div>

    <div ng-repeat="post in posts | orderBy:'-upvotes'">
      <span class="glyphicon glyphicon-thumbs-up"
        ng-click="incrementUpvotes(post)"></span>
      {{post.upvotes}}
      <span style="font-size:20px; margin-left:10px;">
        <a ng-show="post.link" href="{{post.link}}">
          {{post.title}}
        </a>
        <span ng-hide="post.link">
          {{post.title}}
        </span>
      </span>
      <span>
        <a href="#/posts/{{$index}}">Comments</a>
      </span>
    </div>

    <form ng-submit="addPost()"
      style="margin-top:30px;">
      <h3>Add a new post</h3>

      <div class="form-group">
        <input type="text"
        class="form-control"
        placeholder="Title"
        ng-model="title"></input>
      </div>
      <div class="form-group">
        <input type="text"
        class="form-control"
        placeholder="Link"
        ng-model="link"></input>
      </div>
      <button type="submit" class="btn btn-primary">Post</button>
    </form>
  </script>

application.html.erb

<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'application', media: 'all'%>
  <%= javascript_include_tag 'application'%>
  <%= csrf_meta_tags %>
</head>

<body ng-app="flapperNews">

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
    </div>
  </div>
  </body>

路由

root to：'application＃angular'

application_controller.rb

def angular
 render 'layouts/application'
end

Answer 1

因此，如果我正确地阅读了您的帖子和原始教程，看起来您正在提取教程最初放在应用程序文件中的一些代码，并尝试将其放入名为_home的部分代码中。 HTML

主要问题是你没有告诉应用程序在任何地方呈现部分。你需要添加

<%= render "home" %>

您希望该部分显示在页面上。这将呈现部分_home.html.erb（上面的文件标记为“_home.html”，这是次要问题）。

您可以在此处获得有关“渲染”和部分内容的大量背景知识：PARTIALS和PARTIALS

无法在RoR

1 个答案: