angularjs와의 Syncronization $ http 함수

나는 angularjs를 처음 사용하고 있으며 서버에서 연락처를로드하는 아주 작은 응용 프로그램이 있습니다. 여기에서 코드 스 니펫은 완전한 app.js입니다. 문제는 내가 동기화를 사용하여 서버 호출을 수행하는 방법을 파악할 수 없다는 것입니다. 코드 조각에서 페이지를 새로 고치면 경고 3이 표시되고 경고 2가 발생하고 마지막으로 경고 4가 발생합니다. 서버 http 호출이 수행 할 시간이 조금 걸리기 때문에 함수가 즉시 반환됩니다. 따라서 브라우저에서 얻을 수있는 것은 배열 "연락처"에 2 개의 테스트 항목이 표시되는 것입니다. Alert 4가 드디어 등장하지만 너무 늦었습니다. 어떤 도움을 주시면 감사하겠습니다. 연락처를 비동기 적으로 결정되는 것입니다 때문에

var module = angular.module('app', []); 
 

 
module.service('ContactService', function ($http) { 
 

 
    //contacts array to hold list of all contacts - 2 entries for test 
 

 
    //var $contacts = []; 
 
    var contacts = [ 
 
     { 
 
     id: 0, 
 
     'First_Name': 'Harmon', 
 
     'Last_Name': 'Adams', 
 
     'Home_Phone': '123-2343-44' 
 
     }, 
 
     { 
 
      id: 1, 
 
      'First_Name': 'Sam', 
 
      'Last_Name': 'Spade', 
 
      'Home_Phone': '123-2343-44' 
 
     } 
 
    ]; 
 

 
    // returns the contacts list 
 
    this.list = function() { 
 
    // var contacts = []; 
 
     $http.post('http://localhost/Contacts7/GetData.php', {'cat' : 'Friends'}). 
 
      success(function(data) { 
 
       contacts = data.datarecords; 
 
       alert('4 - within $post - '+contacts); 
 
      }). 
 
      error(function(data, status){ 
 
       alert('error!'); 
 
      }); 
 
     alert('3 - before return - '+contacts); 
 
     return contacts; 
 
    } 
 
}); 
 

 
module.controller('ContactController', function ($scope, ContactService) { 
 
    $scope.contacts = ContactService.list(); 
 
    alert('2 - after list - '+ $scope.contacts); 
 
});

<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title>Contact Dialer </title> 
 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
<div ng-app="app" ng-controller="ContactController"> 
 

 
    <div class="container" > 
 
    <div class="row row-centered"> 
 
     <div class="col-md-2 button-row col-centered"> 
 
      <button type="button" class="btn btn-Primary btn-l btn-block" ng-click="GetByCat('Favorites')">Favorites</button> 
 
     </div> 
 
     <div class="col-md-2 button-row col-centered"> 
 
      <button type="button" class="btn btn-Primary btn-l btn-block" ng-click="GetByCat('Friends')">Friends</button> 
 
     </div> 
 
     <div class="col-md-2 button-row col-centered"> 
 
      <button type="button" class="btn btn-Primary btn-l btn-block" ng-click="GetByCat('Loose Friends')">Loose Friends</button> 
 
     </div> 
 
     <div class="col-md-2 button-row col-centered"> 
 
      <button type="button" class="btn btn-Primary btn-l btn-block" ng-click="GetByCat('Loose_Loose Friends')">Loose-Loose Friends</button> 
 
     </div> 
 
     <div class="col-md-2 button-row col-centered"> 
 
      <button type="button" class="btn btn-Primary btn-l btn-block" ng-click="GetByCat('Business')">Business</button> 
 
     </div> 
 
     <div class="col-md-2 button-row"> 
 
     </div> 
 
    </div> 
 
     {{xxx}} 
 
     <table class='table table-striped table-bordered'> 
 
      <th class = 'text-center'>Name</th> 
 
      <th class = 'text-center'>Home Phone</th> 
 
      <th class = 'text-center'>Mobile Phone</th> 
 
      <th class = 'text-center'>Bus. Phone</th> 
 
      </tr> 
 
      <tr ng-repeat='contact in contacts'> 
 
       <th class = 'text-center' >{{contact.Last_Name}}, {{contact.First_Name}}</th> 
 
       <td class = 'text-center'>{{contact.Home_Phone}}</td> 
 
       <td class = 'text-center'>{{contact.Mobile_Phone}}</td> 
 
       <td class = 'text-center'>{{contact.Business_Phone}}</td> 
 
      </tr> 
 
     </table></div> 
 
    </div> 
 
<script src="js/jquery-1.11.0.min.js"></script> 
 
<script src="js/underscore-min.js"></script> 
 
<script src="js/bootstrap.min.js"></script> 
 
<script src="js/angular.min.js"></script> 
 
<script src="js/angular-route.min.js"></script> 
 
<script src="js/app.js"></script> 
 
</body> 
 
</h

출처

2015-01-03 Jim Bell

당신은 당신의 서비스에서 contacts를 반환 할 수 없습니다. 대신 주소록을 (으)로 되돌려 보내야합니다.이 주소록은 주소록을 검색 할 때 컨트롤러의 주소록을 채우는 데 사용할 수 있습니다.

서비스 :

module.service('ContactService', ['$http', function ($http) { 
    return { 
     list: function() { 
      return $http.post('http://localhost/Contacts7/GetData.php', 
           {'cat' : 'Friends'}) 
      .then(function (response) { 
       return response.data.datarecords; 
      }) 
      .catch(function (error) { 
       throw new Error("Failed to retrieve contacts!"); 
      }); 
     } 
    }; 
}]);

주 당신은 내가 배열 스타일의 의존성 주입을 사용하는 마법의 의존성 주입 스타일을 사용하는 첫 번째 줄을 변경 것으로 나타났습니다 수 있습니다. 이것은 (내 생각에 마술 DI 스타일은 나쁜 생각이라고 생각하기 때문에) 나의 개인적인 취향 일 뿐이며, 당신이해야 할 일이 아닙니다. 아래 코드에도 동일하게 적용됩니다.

컨트롤러 :

module.controller('ContactController', ['$scope', 'ContactService', 
             function ($scope, ContactService) { 
    $scope.contacts = []; 
    ContactService.list() 
    .then(function (contacts) { 
     $scope.contacts = contacts; 
     alert('2 - after list - '+ $scope.contacts); 
    }); 
}]);

출처

2015-01-03 18:39:52 JLRishe

이 답변은 좋지만 DI 구문을 배열 구문으로 변경 한 이유는 무엇입니까? –

@BenjaminGruenbaum 매직 DI 구문을 사용하는 것은 [antipractice] (http://daemon.co.za/2014/03/complexity-creeps-concerned-for-future-of-angular/)이기 때문에. – JLRishe

그래,하지만 겸허 한 견해로 OP의 코드에 주관적인 변화를주지 않는 것이 가장 좋다 - 과거에 앵귤러 워크샵을 여러 번했는데 어레이 구문을 사용하는 사람들과 ng-min을 사용하는 사람들간에 대략 똑같이 나뉘 었다고 말할 수있다. (지금 [ng-annotate] (https://github.com/olov/ng-annotate)). 나는 모든 minifier가 툴링을하고 "frameworks"위에 있지 않은 "언어의 남용"또는 반 패턴이라고 결코 부르지 않을 것입니다 - minifier가 소스 코드에 대해 가정 할 때 여기서 minifier는 잘못되었습니다. . –

반환하지 마십시오 연락처는 외부 아약스에서 객체. 성공 콜백에서 연락처를 반환해야합니다.

// returns the contacts list 
this.list = function() { 
// var contacts = []; 
$http.post('http://localhost/Contacts7/GetData.php', {'cat' : 'Friends'}).then(
//success call back 
function(data) { 
    contacts = data.datarecords; 
    alert('4 - within $post - '+contacts); 
    return contacts; 
}, 
//error call back 
function(data, status){ 
    //error handling can be done here 
    alert('error!'); 
    return; 
});

희망이 있다면 도움이 될 것입니다.

출처

2015-01-03 18:52:10

angularjs와의 Syncronization $ http 함수

답변

관련 문제