AngularJS workflow 문제 - list -> detail -> list

Question

저는 Angular를 처음 접했고 무한 스크롤을 구현하려고합니다. 저는 두 가지 문제에 직면하고 있습니다. 나는 두 가지 문제를 해결할 방법이 확실하지 않습니다. 먼저 ngInfiniteScroll을 사용하여 앱 목록을 표시하고 싶습니다. 이것은 잘 작동하고 있습니다. 나는 예제 코드를 사용하여 실행했다.

이제 앱을 클릭하여 세부 정보를 확인하고 싶습니다. 보기가 표시되어 있지만 한 컨트롤러에서 다른 컨트롤러로 앱 목록을 공유하는 방법을 모르겠습니다. 그것이 내가 목록으로 세부 사항을 목록에서 갈 때마다 처음부터 다시 결과로 appcatalog에 새로운 AppCatalog()를 인스턴스화 그래서 우선

//// AppCatalog constructor function to encapsulate HTTP and pagination logic 
applicationCatalog.factory('AppCatalog', function($http) { 
    var AppCatalog = function() { 
     this.apps = []; 
     this.selectedApps = []; 
     this.busy = false; 
     this.after = ''; 
     this.page = 1; 
     this.maxresults = 50; 
    }; 

    AppCatalog.prototype.nextPage = function() { 
     if (this.busy) return; 
     this.busy = true; 
     var restUrl = "/web-portal/apps/catalog/search?page="+this.page+"&maxresults="+this.maxresults; 
     $http({method: 'GET', url: restUrl}).success(function(data) { 
      var apps = data; 
      for (var i = 0; i < apps.length; i++) { 
       this.apps.push(apps[i]); 
      } 
      this.after = this.apps[this.apps.length - 1].id; 
      this.page += 1; 
      this.busy = false; 
     }.bind(this)); 
    }; 

    return AppCatalog; 
}); 

applicationCatalog.controller('appCatalogController', ['$scope', 'AppCatalog', 
    function(scope, AppCatalog) { 
     scope.appcatalog = new AppCatalog(); 
    } 
]); 

는 느낌이 좋지 않습니다. 이 코드는 작동하며 무한 스크롤은 앱의 다음 배치를 올바르게 생성합니다. 앱 목록을 내 모퉁이 페이지의 수명주기 동안 저장하면 안되며 페이지를 새로 고침하거나 멀리 이동할 때만 새로 고쳐야합니다. 어떻게이 코드를 변경하면됩니까?

두 번째 도전 과제는 앱 목록에 이미 다운로드 한 앱의 세부 정보를보고 싶을 때 액세스하는 방법을 모르겠다는 것입니다.

appDetailsController에서 ID를 기반으로 목록에서 앱을 가져 오려고합니다. 하지만 두 번째 컨트롤러에서 앱 목록에 액세스하는 방법을 모르겠습니다. 그것은 이미 기억 속에 있어야합니다.

마지막으로이 세부 컨트롤러에서 목록을 반환하면 (내 첫 번째 질문과 관련 있음) 다시 시작됩니다. 내 페이징 정보, 스크롤 목록의 현재 위치 등이 모두 손실됩니다. 이 워크 플로는 공통적 인 워크 플로 여야하지만 여기에서 어디로 가야할지 모르겠습니다.

미리 도움을 주셔서 감사합니다.

자레드

Answer 1

확인. 자바 스크립트가 약간의 작업이 필요하다고 판단한 후 웹에서 솔루션을 복사하고 붙여 넣을 때주의해야합니다. 여기에 업데이트 된 솔루션이 있습니다. 이것은 위의 질문에 대한 고정 해결책입니다. 나는 그것이 완벽하고 개선을위한 제안에 열려 있는지 모르겠습니다.

var applicationCatalog = angular.module('applicationCatalog', ['infinite-scroll', 'ngRoute']); 

///necessary hack 
applicationCatalog.run(function($http){ 
    window.http = $http; 
}); 

/* 
* Small config with template mapping 
*/ 
applicationCatalog.config(function($routeProvider){ 
    $routeProvider 
     .when("/", { 
      templateUrl: '../assets/scripts/angular/views/appList.html' 
     }) 
     .when("/apps/details/:id", { 
      templateUrl: '../assets/scripts/angular/views/appDetails.html' 
     }) 
     .otherwise({ 
      redirectTo: "/" 
     }); 
}); 

applicationCatalog.factory('AppCatalog', function($http) { 
    var apps = []; 
    var activeApps = []; 
    var activeAppIds = ''; 
    var busy = false; 
    var after = ''; 
    var page = 1; 
    var maxresults = 50; 

    var nextPage = function() { 
     if (busy) return; 
     busy = true; 
     var restUrl = "/web-portal/apps/catalog/search?page="+page+"&maxresults="+maxresults; 
     $http({method: 'GET', url: restUrl}).success(function(data) { 
      var newApps = data; 
      for (var i = 0; i < newApps.length; i++) { 
       apps.push(newApps[i]); 
      } 
      after = apps[apps.length - 1].id; 
      page += 1; 
      busy = false; 
     }.bind(this)); 
    }; 

    var addNewApp = function (id, appcatalog) { 
     this.activeApps.push(id); 
     var ids = ""; 
     for(var i = 0; i < this.activeApps.length; i++) { 
      if(ids.length > 0) ids += ","; 
      ids += this.activeApps[i]; 
     } 
     this.activeAppIds = ids; 
    } 

    return { 
     apps: apps, 
     activeApps: activeApps, 
     activeAppIds: activeAppIds, 
     busy: busy, 
     page: page, 
     after: after, 
     maxresults: maxresults, 

     nextPage: nextPage, 
     addNewApp: addNewApp 
    }; 
}); 

applicationCatalog.controller('appCatalogController', ['$scope', 'AppCatalog', 
    function(scope, appcatalog) { 
     var catalog = appcatalog; 
     if(catalog.apps.length == 0) catalog.nextPage(); 
     scope.appcatalog = catalog; 
    } 
]); 

applicationCatalog.controller('appCatalogSelectedController', ['$scope', 'AppCatalog', 
    function(scope, appcatalog) { 
     var catalog = appcatalog; 
     scope.appcatalog = catalog; 
    } 
]); 

applicationCatalog.controller('appDetailsController', ['$scope', '$routeParams', 'AppCatalog', 
    function(scope, params, appcatalog) { 
     var catalog = appcatalog; 
     scope.appcatalog = catalog; 

     var id = params.id; 
     for(var i = 0; i < catalog.apps.length; i++) { 
      var app = catalog.apps[i]; 
      if(app.id == params.id) { 
       scope.app = app; 
       return; 
      } 
     } 
    } 
]); 

여기서 중요한 차이점은 공장 설정 방법입니다. 그것은 컨트롤러에 새로운 객체를 생성하는 것이 아니라 의존성 삽입을 사용하여 컨트롤러를 컨트롤러의 범위에 넣습니다. 이 예제는 appcatalog 팩토리를 공유하는 목록과 컨트롤러 3 개로 작업하고 있습니다. 이것은 현재 매우 잘 작동하고 있습니다.

스크롤 영역에서 내 위치를 기억하고 세부 사항에서 돌아와 목록으로 돌아올 때 동일한 위치로 되돌아가는 가장 좋은 방법은 아직 확실하지 않습니다.