Question

我通过本教程学习如何将Angularjs与ROR一起使用https://thinkster.io/angulartutorial/angular-rails/

我已经到了这样一个地步：当我为一个服务添加一个新功能时，它应该获得我们在数据库中的所有帖子。但是，当我运行代码时，页面不再加载。或者至少不呈现html。元素检查中没有错误迹象。但是，我不确定它是否与在js文件中放置函数有关。我对js全新，我仍然很难阅读sintax并发现代码中的错误。 Rubymine为o.getAll提供了一条线索，并提供了Unreacheble代码警告。如果有人可以看一下并给我任何提示，那就太好了。

向一个文件中的所有代码道歉html和js。我对资产管道存在一些问题，我想尽快解决。

app.js

块引用

angular.module('flapperNews', ['ui.router'])
//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'
            })

        $urlRouterProvider.otherwise('home');
    }])
//Posts service
.factory('posts', ['$http', function($http){

    var o = {
        posts: []
    };
    return o;

    o.getAll = function() {
        return $http.get('/posts.json').success(function(data){
            angular.copy(data, o.posts);
        });
    };


}])

//Main Controller
.controller('MainCtrl', [
    '$scope',
    'posts',

    function($scope, posts){
        $scope.posts = posts.posts;
        $scope.addPost = function(){
            if(!$scope.title  || $scope.title == '') { return; }
            $scope.posts.push({
                title: $scope.title,
                link: $scope.link,
                upvotes: 0,
                comments: [
                    {author: 'Joe', body: 'Cool post!', upvotes: 0},
                    {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
                ]
            });
            $scope.title = '';
            $scope.link = '';
        };
        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };

    }])
//Posts Controller
.controller('PostsCtrl', [
    '$scope',
    '$stateParams',
    'posts',
    function($scope, $stateParams, posts){
        $scope.post = posts.posts[$stateParams.id];

        $scope.addComment = function(){
            if($scope.body === '') { return; }
            $scope.post.comments.push({
                body: $scope.body,
                author: 'user',
                upvotes: 0
            });
            $scope.body = '';
        };}]);

＆GT; 并遵循application.html.erb

> Blockquote

<html>
<head>


  <title>FlapperNews</title>

  <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>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="javascripts/app.js"></script>
  <script src="javascripts/application.js"></script>

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

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

<script type="text/ng-template" id="/posts.html">
  <div class="page-header">
    <h3>
      <a ng-show="post.link" href="{{post.link}}">
        {{post.title}}
      </a>
        <span ng-hide="post.link">
          {{post.title}}
        </span>
    </h3>
  </div>

  <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
      <span class="glyphicon glyphicon-thumbs-up"
            ng-click="incrementUpvotes(comment)"></span>
    {{comment.upvotes}} - by {{comment.author}}
      <span style="font-size:20px; margin-left:10px;">
        {{comment.body}}
      </span>
  </div>
  <form ng-submit="addComment()"
        style="margin-top:30px;">
    <h3>Add a new comment</h3>

    <div class="form-group">
      <input type="text"
             class="form-control"
             placeholder="Comment"
             ng-model="body">
    </div>
    <button type="submit" class="btn btn-primary">Post</button>
  </form>

</script>

</body>
</html>

Answer 1

从factory开始，o函数返回getAll，因此无法访问

 .factory('posts', ['$http', function($http){

   var o = {
     posts: []
   };

   //removed return 

   o.getAll = function() {
      return $http.get('/posts.json').success(function(data){
         angular.copy(data, o.posts);
      });
   };

  return o; //at the added return 
 }])

没有达到角度工厂功能。

1 个答案: