Question

我不知道如何为json文件提供服务，并在我的控制器中调用此服务。我的应用程序中有一个控制器，因此必须保留。

Answer 1

您必须从控制器拨打您的服务。

您的服务：

angular.module('YOURAPP')
.service("userAService",  function ($http) {
                this.promise= function () {
                    return $http.get('resources/json/data.json')
                }
    });

然后在你的控制器功能中：

mycontroller = function(userAService){
     userAService.promise().then(
         function(response){
             //do what you want in your promise
             // try console.log(response.data) to see if you get your data.
         }
     )
}

Answer 2

尝试通过run code snippet蓝色按钮运行此示例。

基本上，您需要声明该服务，通过Angular.DI要求它，最后调用服务方法并等待其结果。希望它有所帮助

angular
  .module('test', [])
  .constant('API' , 'https://jsonplaceholder.typicode.com')
  .service('TestService', function(API, $http) {
      
    this.getData = function() {
      return $http
        .get(API + '/photos')
        .then(function(response) {
          return response.data;
        })
      };
  })
  .controller('TestCtrl', function($scope, TestService) {
  
  //But a Resolve is preferred
  TestService
    .getData()
    .then(function(data) {
      $scope.album = data;
    })
  ;
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <article ng-controller="TestCtrl">
    <div ng-repeat="photo in album">
      <h3 ng-bind="photo.title"></h3>
      <img ng-src="{{photo.thumbnailUrl}}" />
    </div>
  </article>
</section>

如何在AngularJS中使用带有单个控制器应用程序的json文件

2 个答案: