0

Rendern Ich folge diesem Tutorial https://thinkster.io/angular-rails zu eckigen js auf RoR einrichten. Ich stecke hier fest, da es home.html nicht partiell mit in Assets/Javascripts/home/_home.html darstellt. Browser zeigt leeren Bildschirm, obwohl ich HTML und eckig in _home.html hinzugefügt habe. Bitte helfen Sie mirKann nichts mit eckigen js auf RoR

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> 

Routen

root: 'Anwendung # Winkel'

application_controller.rb

def angular 
render 'layouts/application' 
end 

Antwort

0

Also, wenn ich lese Dein Post und das originale Tutorial richtig aussehen Es ist so, als würden Sie einen Teil des Codes herausziehen, den das Tutorial ursprünglich in die Anwendungsdatei geschrieben hatte, und versuchen, es in einen Teil mit dem Titel _home.html einzufügen. Das Hauptproblem besteht darin, dass Sie die Anwendung nicht zum Rendern anweisen die Partielle überall. Sie müssten

<%= render "home" %> 

hinzufügen, wo Sie wollen, dass Teil auf der Seite erscheinen. Dies wird die partielle _home.html.erb (Ihre Datei ist oben mit "_home.html", das ist das kleinere Problem) gerendert.

Sie viel Hintergrund auf „Rendern“ erhalten und partials hier: PARTIALS und PARTIALS