角度获取控制器的.service中的json数据

Question

我正在开发我的第一个离子应用程序，我正在尝试显示一个数组，目前它只显示这个：

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

这是我的控制器和状态的 .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('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;

}])

Answer 2

这是我正在开发的应用程序的一小段代码（简化）

    'use strict';

    angular.module('myApp.products', [])
      .factory('getProducts', ['$http', 'DEFAULTS', '$q', function ($http, DEFAULTS, $q) {

        var productsFactory = {};

        var _getList = function (nextPageUrl) {
          var deferred = $q.defer();

          var url = nextPageUrl || DEFAULTS.url + '/api/v1/products';

          $http({method: 'get', url: url}).then(
            function (res) {
              deferred.resolve(res);
            },
            function (err) {
              deferred.reject(err);
            }
          );
          return deferred.promise;
        };

        var _getDetail = function (url) {
          var deferred = $q.defer();

          $http({method: 'get', url: url}).then(
            function (res) {
              deferred.resolve(res);
            },
            function (err) {
              deferred.reject(err);
            }
          );
          return deferred.promise;

        };

        productsFactory.list = _getList;
        productsFactory.detail = _getDetail;
        return productsFactory;

  }]);

这是一个处理产品列表的 http 请求和产品详细信息的 http 请求的工厂。

对于列表项和详细信息，您应该进行一次调用，该调用将仅返回标题或标题（显然还有一个标识符），然后进行第二次调用，获取这些 id 并返回文章的正文.但这取决于你的 api。