ui 路由未使用 Rails 呈现

Question

我一直为这个问题发疯。我正在开发一个应用程序，它有 rails 后端和 angularjs 前端。本教程告诉我使用 ui 路由来呈现部分模板。正如我所做的一些测试，除了路由之外，一切似乎都工作正常。如果有人可以找到此代码中的错误，请告诉我。我对 javascript 很陌生，正在努力寻找问题所在。

我正在学习的教程就是这个。 https://thinkster.io/angular-rails/

application.html.erb

 <!DOCTYPE html>
<html>
<head>
  <title>FlapperNews</title>
  <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">-->

  <!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>-->
  <!--<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>-->
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="flapperNews">
<div class="row">


    <ui-view></ui-view>
  </div>
</div>





</body>
</html>

app.js

// templateUrl: '/assets/templates/_home.html',

angular.module('flapperNews', ['ui.router', 'templates'])
    //Provider
    .config([
        '$stateProvider',
        '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: '_home.html',
                    controller: 'MainCtrl',
                    resolve: {
                        postPromise: ['posts', function(posts){
                            return posts.getAll();
                        }]
                    }
                })
                .state('posts', {
                    url: '/posts/{id}',
                    templateUrl: '_posts.html',
                    controller: 'PostsCtrl',
                    resolve: {
                        postPromise: ['posts', function(posts){
                            return posts.getAll();
                        }]
                    }
                })

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

_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">
        </div>
        <div class="form-group">
            <input type="text"
                   class="form-control"
                   placeholder="Link"
                   ng-model="link">
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
    </form>
</script>

mainCtrl.js

angular.module('flapperNews')
    //Main Controller
    .controller('MainCtrl', [
        '$scope',
        'posts',

        function($scope, posts){
            $scope.posts = posts.posts;
            $scope.addPost = function(){
                if(!$scope.title  || $scope.title == '') { return; }
                posts.create({
                    title: $scope.title,
                    link: $scope.link
                });
                $scope.title = '';
                $scope.link = '';
            };
            $scope.incrementUpvotes = function(post) {
                post.upvotes += 1;
            };

        }])

如果您需要更多信息，请告诉我。谢谢

Answer 1

不确定这是否是您的问题，但在您发布的教程 link 中，他们将模板定义为：

templateUrl: 'home/_home.html',

和

templateUrl: 'posts/_posts.html',

Answer 2

这可能无济于事，但您可以尝试将 href="#/posts/{{$index}}" 更改为 ui-sref="posts({ id: $index })"" http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref

另外，这里有一个模板，您可以用 ui-router 和 Rails 以便宜的价格购买 https://wrapbootstrap.com/theme/angle-bootstrap-admin-app-angularjs-WB04HF123

Answer 3

我遇到了同样的问题。只需从您的模板中删除脚本标签。

Answer 4

检查牙套，解决后没有正确闭合。它应该是 resolve: { postPromise: ['posts', function(posts){ return posts.getAll(); ]}

ui 路由未使用 Rails 呈现

ui routing not rendering with Rails

templates

ruby-on-rails

render

angularjs

angular-ui-router