업데이트 각도 동적으로 HTTP 요청을 기반으로 한보기

Question

저는 초보자이고 각도가 너무 작아서 http 요청을 기반으로보기를 업데이트하려고합니다.

<div ng-repeat="cat in content" class="animated lightSpeedIn"> 
     <a ng-click="goToDetail(cat.id)" nav-transition="none"><div ng-style="{'background': 'url(' + cat.catBgUrl + ')','background-repeat': 'no-repeat','background-size': '100% 100%','display': 'block','width': '100%','height': '25vh' }" class="bgcat center"> 
     <div class="inner"> 
      <h1>{{cat.catName}}</h1> 
      <h4>{{cat.catSubtitle}}</h4> 
      <img src="img/home/open.png" alt=""> 
     </div> 
     </div></a> 
    </div> 

$scope.update = function(id){ 
     switch (id) { 
     case 1: 
     $http.get(Backand.getApiUrl() + '/1/objects/details') 
     .then(function(response) { 
      $scope.details = response.data.data[0]; 
      $rootScope.locName = response.data.data[0].locationName; 
      $rootScope.locSubTitle = response.data.data[0].locationSubTitle; 
      $rootScope.locParagraph = response.data.data[0].locationParagraph; 
      $rootScope.locGluten = response.data.data[0].glutenfrei; 
      $rootScope.locRaucher = response.data.data[0].raucher; 
      $rootScope.locGarten = response.data.data[0].garten; 
      $rootScope.locTakeAway = response.data.data[0].takeaway; 
      $rootScope.locRollstuhl = response.data.data[0].rollstuhl; 
      console.log($rootScope.locGluten); 
     }); 
     break; 
      case 2: 
      $http.get(Backand.getApiUrl() + '/1/objects/details') 
      .then(function(response) { 
      $rootScope.locName = response.data.data[1].locationName; 
      $rootScope.locSubTitle = response.data.data[1].locationSubTitle; 
      $rootScope.locParagraph = response.data.data[1].locationParagraph; 
      $rootScope.locGluten = response.data.data[1].glutenfrei; 
      $rootScope.locRaucher = response.data.data[1].raucher; 
      $rootScope.locGarten = response.data.data[1].garten; 
      $rootScope.locTakeAway = response.data.data[1].takeaway; 
      $rootScope.locRollstuhl = response.data.data[1].rollstuhl; 

      }); 
      break; 
     default: 

     } 
    } 


    $scope.goToDetail = function(id) { 
     $state.go("detail") 
     $scope.update(id); 

    } 

HTML 나는이 나쁜 코드입니다하지만 내 생각은 그 상태 정보로 이동하여 항목의 ID로 기능 업데이트를 실행했다 알고있다. 그런 다음 id를 전환하고 클릭 된 요소를 기반으로보기를 업데이트합니다.

코드는 제대로 작동하지만 훨씬 더 좋은 방법이 있으며 동적으로 필요하다고 생각합니다.

저는이 문제에 정말로 고착되어 있습니다. 올바르게 처리하고 싶습니다. 어떻게 만들어야합니까? 제발 저에게 힌트를 주시겠습니까?

Answer 1

for codes relating to data it is better to use services for separation. 

**Your service** 

는 app이 각 모듈하자

app.service('detailService',function($http){ 
    var update = function(id,callback){ 
     switch (id) { 
      case 1: 
       $http.get(Backand.getApiUrl() + '/1/objects/details') 
       .then(function(response) { 
        callback(response,0); 
       }); 
      break; 
      case 2: 
       $http.get(Backand.getApiUrl() + '/1/objects/details') 
       .then(function(response) { 
        callback(response,1); 
       }); 
      break; 
    }; 
}); 

**Your controller** 

app.controller('myCtrl',function($scope,$state,detailService){ 
    detailService.update(id,function(response,index){ 
     $scope.response = response; 
     $scope.index = index; 
     $state.go("detail"): 
    }); 
}); 

**You can display the response as** 

<p>Details : {{response.data.data[{{index}}]}}</p> 
<p>Location Name : {{response.data.data[{{index}}].locationName}}</p>