Question

我对这个问题感到很疯狂。我正在构建一个应用程序，其后端带有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;
            };

        }])

如果您需要更多信息，请告知我们。感谢

enter image description here

Answer 1

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

Answer 2

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

templateUrl: 'home/_home.html',

和

templateUrl: 'posts/_posts.html',

Answer 3

这可能无济于事，但你可以尝试将你的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 4

检查牙箍，未正确关闭。它应该是 resolve: { postPromise: ['posts', function(posts){ return posts.getAll(); ]}

ui路由不用Rails渲染

4 个答案: