多个$http.get请求，每个JSON文件在HTML中以h1分隔

Multiple $http.get requests w/each JSON file split by h1 in HTML

本文关键字：文件 HTML 中以 分隔 h1 JSON 每个 http get 请求 多个      更新时间：2023-09-26

我正在构建我的第一个Angular应用程序，使用$http.get从github中提取原始json文件，每个json文件的输出在HTML中的头文件之间进行分割。我的代码正在工作，但非常多余，我希望它可以被重构。

我的控制器看起来像这样：

.controller('mycontroller', function($scope, $http) {
  var firstUrl ='https://raw.githubusercontent.com/user/repo/master/first.json';
  var secondUrl ='https://raw.githubusercontent.com/user/repo/master/second.json';
  var thirdUrl ='https://raw.githubusercontent.com/user/repo/master/third.json';
  var fourthUrl ='https://raw.githubusercontent.com/user/repo/master/fourth.json';
  var fifthUrl ='https://raw.githubusercontent.com/user/repo/master/fifth.json';
  var sixthUrl ='https://raw.githubusercontent.com/user/repo/master/sixth.json';
  $http.get(firstUrl).success(function(data) {
      $scope.firsts = data;
  });
  $http.get(secondUrl).success(function(data) {
      $scope.seconds = data;
  });
  $http.get(thirdUrl).success(function(data) {
      $scope.thirds = data;
  });
  $http.get(fourthUrl).success(function(data) {
    $scope.fourths = data;
  });
  $http.get(fifthUrl).success(function(data) {
    $scope.fifths = data;
  });
  $http.get(sixthUrl).success(function(data) {
    $scope.sixths = data;
  });
});

我的HTML如下所示：

 <div ng-controller="mycontroller" id="content" class="container">
          <br/>
          <div ng-repeat="first in firsts" class="panel panel-default">
              <h1 id="first">first</h1>
              <div class="panel-heading">
                  <h1><a href="{{first.url}}">{{first.company}}</a></h1>
                  <p>{{first.address}}</p>
              </div>
                <div class="list-group">
              <a ng-repeat="position in first.positions" class="list-group-item" href="{{first.url}}">
                  {{position.title}}
              </a>
          </div>
         </div>
      </div>
      <div ng-controller="mycontroller" id="content" class="container">
          <h1 id="second">second</h1>
          <hr/>
          <div ng-repeat="second in seconds" class="panel panel-default">
              <div class="panel-heading">
                  <h1><a href="{{second.url}}">{{second.company}}</a></h1>
                  <p>{{second.address}}</p>
              </div>
          <div class="list-group">
              <a ng-repeat="position in second.positions" class="list-group-item" href="{{second.url}}">
                  {{position.title}}
              </a>
          </div>
         </div>
      </div>
      <div ng-controller="mycontroller" id="content" class="container">
          <h1 id="thirds">third</h1>
          <hr/>
          <div ng-repeat="third in thirds" class="panel panel-default">
              <div class="panel-heading">
                  <h1><a href="{{third.url}}">{{third.company}}</a></h1>
                  <p>{{third.address}}</p>
              </div>
          <div class="list-group">
              <a ng-repeat="position in third.positions" class="list-group-item" href="{{third.url}}">
                  {{position.title}}
              </a>
          </div>
        </div>
      </div>
      <div ng-controller="mycontroller" id="content" class="container">
          <h1 id="fourth">fourth</h1>
          <hr/>
          <div ng-repeat="fourth in fourths" class="panel panel-default">
              <div class="panel-heading">
                  <h1><a href="{{fourth.url}}">{{fourth.company}}</a></h1>
                  <p>{{fourth.address}}</p>
              </div>
          <div class="list-group">
              <a ng-repeat="position in fourth.positions" class="list-group-item" href="{{fourth.url}}">
                  {{position.title}}
              </a>
          </div>
      </div>
    </div>
      <div ng-controller="mycontroller" id="content" class="container">
          <h1 id="fifth">fifth</h1>
          <hr/>
          <div ng-repeat="fifth in fifths" class="panel panel-default">
              <div class="panel-heading">
                  <h1><a href="{{fifth.url}}">{{fifth.company}}</a></h1>
                  <p>{{fifth.address}}</p>
              </div>
          <div class="list-group">
              <a ng-repeat="position in fifth.positions" class="list-group-item" href="{{fifth.url}}">
                  {{position.title}}
              </a>
          </div>
      </div>
    </div>
      <div ng-controller="mycontroller" id="content" class="container">
          <h1 id="sixth">sixth</h1>
          <hr/>
          <div ng-repeat="sixth in fifths" class="panel panel-default">
              <div class="panel-heading">
                  <h1><a href="{{sixth.url}}">{{fifth.company}}</a></h1>
                  <p>{{sixth.address}}</p>
              </div>
          <div class="list-group">
              <a ng-repeat="position in sixth.positions" class="list-group-item" href="{{fifth.url}}">
                  {{position.title}}
              </a>
          </div>
      </div>
    </div>

您可以使用数组：

.controller('mycontroller', function($scope, $http, $q) {
    var urls = [
        'https://raw.githubusercontent.com/user/repo/master/first.json',
        'https://raw.githubusercontent.com/user/repo/master/second.json',
        'https://raw.githubusercontent.com/user/repo/master/third.json',
        'https://raw.githubusercontent.com/user/repo/master/fourth.json',
        'https://raw.githubusercontent.com/user/repo/master/fifth.json',
        'https://raw.githubusercontent.com/user/repo/master/sixth.json'
    ];
    var promises = urls.map(function(url) {
        return $http.get(url);
    });
    $q.all(promises).then(function(data) {
        // data will represent an array containing the response from all
        // AJAX requests
        $scope.data = data;
    });
});

并且在data数组上的标记循环中：

<div ng-controller="mycontroller" ng-repeat="elements in data" class="container">
    <h1>{{$index}}</h1>
    <hr/>
    <div ng-repeat="item in elements" class="panel panel-default">
        <div class="panel-heading">
            <h1><a href="{{item.url}}">{{item.company}}</a></h1>
            <p>{{item.address}}</p>
        </div>
        <div class="list-group">
            <a ng-repeat="position in item.positions" class="list-group-item" href="{{item.url}}">
                {{position.title}}
            </a>
        </div>
    </div>
</div>

您可以将请求一个接一个地链接起来，这样它们就会在上一个请求完成后执行。

代码段：

$http.get(url[0])
then(function(result){
     //get url[0] results 
     //make url[1] request
     return $http.get(url[1])
})
.then(function(result){
    //get url[1] results
    //make url[2] request
    return $http.get(url[2])
})
.then(function(result){
    //get url[2] results
    //make url[3] request
    return $http.get(url[3])
})

等等。现在，您可以确保对服务器的每个请求都将在上一个请求完成后执行。

最好的方法是将逻辑分解为独立的部分，并在指令中实现功能。所以让我们创建一个：

 (function () {
    'use strict';
    angular.module('test-app', [])
        .controller('mainController', function ($scope) {
            $scope.sourceUrls = [
                'https://raw.githubusercontent.com/user/repo/master/first.json',
                'https://raw.githubusercontent.com/user/repo/master/second.json',
                'https://raw.githubusercontent.com/user/repo/master/third.json',
                'https://raw.githubusercontent.com/user/repo/master/fourth.json',
                'https://raw.githubusercontent.com/user/repo/master/fifth.json',
                'https://raw.githubusercontent.com/user/repo/master/sixth.json'
            ];
        })
        .directive('sourceViewer', function ($http) {
            return {
                restrict: 'E',
                templateUrl: 'your template url', //DO NOT FORGET TO PROVIDE PATH TO YOUR TEMPLATE HERE
                scope: {
                    url: '='
                },
                link: function (scope, elem, attrs, ctrl) {
                    $http.get(scope.url).success(function (data) {
                        $scope.model = data.data;
                    });
                }
            };
        });
  })();

您的指令模板应该是这样的（向指令的templateUrl属性提供包含此标记的html文件的路径）：

<h1>{{url}}</h1>
<div>
    <p>{{model.address}}</p>
</div>

然后你在index.html文件中使用这个控制器就像：

<div ng-controller="main-controller">
  <source-viewer ng-repeat="sourceUrl in sourceUrls" url="sourceUrl"></div>
</div>
相关文章：