javascript - Angular 在 Controller 的 .service 中获取 json 数据

Question

我正在开发我的第一个 ionic 应用程序，我正在尝试获取一个要显示的数组，目前它只显示:

问题
实际的 json 文件的格式与我下面所示的相同。我无法让 .service 读取我的 json 文件并将其返回给我的 Controller ，它的作用与我使用手动 json 数组时相同。您是否可以在我的应用程序中找到错误以及为什么我没有从数组中获取数据？

这是我的 Controller 和状态的.service

.service('ArticleService', function($http, $q) {
  return {
    articles: [
      {
        "list" : [
          {
            "nid": 0,
            "title": "hi"
          },
          {
            "nid": 1,
            "title": "dude"
          }
        ]
      }
    ],
    getArticles: function() {
      return this.articles
    },
    getArticle: function(articleNid) {
      var dfd = $q.defer()
      this.articles.forEach(function(article) {
        if (article.nid === articleNid) dfd.resolve(article)
      })

      return dfd.promise
    }

  }
})

这是我的状态

.state('app.articles', {
  url: '/articles',
  views: {
    'menuContent' :{
      templateUrl: 'templates/articles.html',
      controller: 'ArticlesCtrl'
    }
  },
  resolve: {
      articles: function(ArticleService) {
        return ArticleService.getArticles()
      }
  }
})

.state('app.article', {
  url: '/articles/:articleNid',
  views: {
    'menuContent' :{
      templateUrl: 'templates/article.html',
      controller: 'ArticleCtrl'
    }
  },
  resolve: {
    article: function($stateParams, ArticleService) {
      return ArticleService.getArticle($stateParams.articleNid)
    }
  }
});

这是我的 Controller

.controller('ArticlesCtrl', function($scope, articles) {
  $scope.articles = articles;
})

.controller('ArticleCtrl', function($scope, $stateParams, article) {
  $scope.article = article;      
});

这是我的模板

<ion-view title="Articles">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item class="item-icon-right" ng-repeat="article in articles" href="#/app/articles/{{article.nid}}">
        {{article.title}}
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Answer 1

在这种情况下，您必须将游览代码更改为:

.service('ArticleService', function($http, $q) {
  var articles: [
      {
        "list" : [
          {
            "nid": 0,
            "title": "hi"
          },
          {
            "nid": 1,
            "title": "dude"
          }
        ]
      }
    ];
  return {
    getArticles: function() {
      return articles
    },
    getArticle: function(articleNid) {
      var dfd = $q.defer()
      articles.forEach(function(article) {
        if (article.nid === articleNid) dfd.resolve(article)
      })

      return dfd.promise
    }

  }
})

就我个人而言，在这种情况下，我会使用工厂，如下所示:

 .factory('$article', ['$http', '$q', funciton($http, $q){
   var articleFactory = {};

   var _all = function(){
     return   [
      {
        "list" : [
          {
            "nid": 0,
            "title": "hi"
          },
          {
            "nid": 1,
            "title": "dude"
          }
        ]
      }
    ]
    //$http for server request instead array
   };

   var _one = function(articleNid) {
      var articles = _all; 
      var dfd = $q.defer()
      articles.forEach(function(article) {
        if (article.nid === articleNid) dfd.resolve(article)
      })

      return dfd.promise
    }

   articleFactory.getAll = _all;
   articleFactory.getOne = _one;
   return articleFactory;

}])