AngularJS에서 컨트롤러를 통해 웹 서비스 데이터 공유

Question

각도 응용 프로그램과 관련하여 2 가지 큰 문제가 있습니다. 저는 완전히 갇혀있어 누군가가 나를 도와 줄 수 있기를 바랍니다.

1. 웹 서비스에서 여러 컨트롤러로 데이터를 공유하는 나의 방법은 결함이 있으며이를 수정하는 방법을 알지 못합니다.
2. 내 지시문은 컨트롤러 범위의 데이터 (문제 1 일 가능성이 높기 때문에)에 산발적으로 액세스하지 못하고 정의되지 않은 상태로 로그하므로 범위 데이터가 해결되기 전에 경로 변경이 발생한다고 생각합니다.

자세한 내용은 사람들이 호텔을 웹 사이트에 등록하는 양식을 제공하는 각도 응용 프로그램입니다. 사람들은 세부 정보를 저장하고 나중에 편집 할 수 있습니다.

내 앱이 다음과 같이 설정되었습니다.

나는에 대한 컨트롤러와 경로가 있습니다

• 호텔 정보 (이름, 위치, 비용 등)
• 객실을
• 시설 (등 수영장, 사우나, 스팀 룸)
• 소유주 세부 사항 (이름, 이메일, 은행 세부 정보)
• 가용성
• 사진

호텔에 대한 데이터를 검색/저장하기 위해 웹 서비스를 호출하는 "HotelService"라는 공장이 있습니다.

컨트롤러간에 데이터를 공유하여 $ rootScope에있는 웹 서비스에서 검색된 데이터를 저장하고 싶습니다. 일반적으로 사람이 이것을 "각도 방식"으로 간주하지 않습니다. 그러나 나는 똑같은 것을 성취 할 다른 방법을 찾을 수 없었습니다. 또한이 기술을 사용하여 컨트롤러를 테스트하는 것을 어렵게 만듭니다. 그래서 나는 다른 해결책을 열어두고 있습니다.

중요한 부분은 웹 서비스에 둘 이상의 초기 "GET"요청을하고 싶지 않다는 것입니다. 일단 데이터가 있으면 모든 컨트롤러가 해당 데이터에 액세스/업데이트 할 수 있기를 원하는데, 사용자는 언제든지 모든 컨트롤러에서 모든 데이터를 저장할 수 있습니다.

일부 코드 :

app.run(
['$rootScope', '$window', 'HotelService', 
function($rootScope, $window, HotelService) 
{ 
    HotelService.get($window.hotelId).then(function(hotel) { 
     $rootScope.data = hotel; 
    }); 
    } 
]); 

가 여기 내 HotelService 코드입니다 :

app.config(['$routeProvider', function($routeProvider) 
{ 
    $routeProvider 
    .when('/', { 
     templateUrl: '/views/info.html', 
     controller: 'InfoController' 
    }) 
    .when('/rooms', { 
     templateUrl: '/views/rooms.html', 
     controller: 'RoomsController' 
    }) 
    .when('/facilities', { 
     templateUrl: '/views/facilities.html', 
     controller: 'FacilitiesController' 
    }) 
    .when('/proprietor', { 
     templateUrl: '/views/proprietor.html', 
     controller: 'ProprietorController' 
    }) 
    .when('/available', { 
     templateUrl: '/views/available.html', 
     controller: 'AvailableController' 
    }) 
    .when('/photos', { 
     templateUrl: '/views/photos.html', 
     controller: 'PhotosController' 
    }); 
}]); 

가 여기에 내가 $ rootScope의 데이터를 설정 내 app.run입니다 :

여기 내 응용 프로그램의 설정입니다

app.factory('HotelService', ['$http', '$rootScope', function ($http, $rootScope) { 
    var hotel = {}; 
    return { 
    get: function(hotelId) { 
     premId = (angular.isUndefined(hotelId)) ? 0 : premId; 
     return $http.jsonp('/webservice', { 
     method: 'GET', 
     params: { 'id': hotelId, 'callback': 'JSON_CALLBACK' }, 
     responseType: 'json' 
     }) 
     .then(function(response) { 
      hotel = response.hotel; 
      $rootScope.$broadcast('handleSharedHotel', hotel); 
      return hotel; 
     }); 
    }, 
    save: function(data) { 
     $rootScope.$broadcast('handleBeforeSaveHotel'); 
     return $http.jsonp('/webservice?callback=JSON_CALLBACK', { 
     method: 'POST', 
     data: data, 
     responseType: 'json' 
     }).then(function(response) { 
     hotel = response.data.hotel; 
     $rootScope.$broadcast('handleSharedHotel', hotel); 
     $rootScope.$broadcast('handleAfterSaveHotel', response); 
     return hotel; 
     }); 
    } 
    }; 
}]); 

내 호텔 정보 컨트롤러는 다음과 같습니다 :

];

매우 이상한 (각도가 아직까지는 범위를 완전히 이해하지 못하기 때문에 이상합니다.) 문제는 내가 가지고 있었던 문제입니다. 경로가 바뀌면 내 지시문에 시간이 흐르지 않으므로 범위 값이 다시 정의되지 않습니다.주소 표시 줄이나 링크에서 직접 페이지를로드 할 때만 발생하지만 페이지를 새로 고칠 때마다 발생하는 것처럼 보입니다.

모든 아이디어는 크게 감사하겠습니다.

Answer 1

반환 된 약속을 HotelService 안에 캐시 한 다음 반환 된 데이터가 필요한 모든 컨트롤러에 서비스를 삽입하는 것이 좋습니다.

그 요청이 코드의이 부분은 당신의 컨트롤러 중 하나 내에서 호출됩니다 만 처음 만들어 질 것이라는 점을 의미 할 것입니다 : 모든 후속 호출됩니다 hotelId 전달을 위해 캐시 된 약속에

HotelService.get($window.hotelId).then(function(hotel) { 
     $rootScope.data = hotel; 
}); 

을 반환되었습니다.

[EDIT (I 그것을 시험하지 않았다하더라도)

가 간략화 예 캐시 HotelService 구현 (get 막 방식). 당신은 당신의 코드베이스에 몇 가지 변경을 소개해야하지만 아이디어가있다 :

이 가

app.factory('HotelService', ['$http', function ($http) { 
    var service = {}; 

    var hotelPromisesCache = {}; 

    service.get = function (hotelId) { 
     var hotelPromise = hotelPromisesCache[hotelId]; 

     if (hotelPromise == undefined) { 
      hotelPromise = $http.jsonp('/webservice', { 
       method: 'GET', 
       params: { 'id': hotelId, 'callback': 'JSON_CALLBACK' }, 
       responseType: 'json' 
      }); 

      hotelPromisesCache[hotelId] = hotelPromise; 
     } 

     return hotelPromise; 
    }; 

    return service; 
}]); 

가

호텔 데이터가 변경되거나 당신이 다시 캐시 얻을 것이다 후 캐시에서 약속을 제거하는 것을 잊지 마세요, 수정되지 번역.