AngularJS workflow problems - list -> detail -> list

Question

I'm new to Angular and am trying to implement an infinite scroll. I'm running into two challenges that I'm not sure how to solve. First I want to show a list of apps using the ngInfiniteScroll. This is working nicely. I used their example code to get up and running.

Now I want to click on an app to view the details. I have the view displaying, but I'm not sure how to share the apps list from one controller to the next.

//// 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();
    }
]);

So first off, instantiating a new AppCatalog() into appcatalog doesn't feel right, as it results in starting over every time I go from list to details back to list. This code does work and infinite scroll correctly produces the next batch of apps. Shouldn't the apps list be stored for the lifecycle of my angular page and only refreshed when I refresh the page or navigate away from it. How would I change this code to do this?

My second challenge, but probably related, is that when I want to view details of an app, which I already have downloaded in the apps list I don't know how to access them.

applicationCatalog.controller("appDetailsController", ['$scope', '$routeParams', 'AppCatalog',
    function(scope, params, appcatalog) {
        scope.appcatalog = appcatalog;
        var id = params.id;
        scope.id = id;
        ///TODO - this doesn't work appcatalog is empty
        var appcatalog = $scope.appcatalog;
        for(var i = 0; i < appcatalog.apps.length; i++) {
            var app = appcatalog.apps[i];
            if(app.id == params.id) {
                $scope.app = app;
                return;
            }
        }
    }
]);

In the appDetailsController I want to pull the app from the list based on the id. But I don't know how to access the apps list from the second controller. It should already be in memory.

Finally when I return the list (this relates to my first question) from this details controller it starts over. My paging info, current location in the scroll list, etc are all lost. This workflow must be a common one, but I'm not sure where to go from here.

Thanks in advance for your help.

Jared

Answer 1

Ok. After deciding that my JavaScript needs a little work and I need to be careful about copying and pasting solutions from the web here is my updated solution. This is the fixed solution to my questions above. I don't know if it's perfect and am open to suggestions for improvement.

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;
            }
        }
    }
]);

The major difference here is in how the factory is set up. It's not constructing a new object in the controller, but rather using dependency injection to put the factory into the scope of the controllers. This is example is working with a list and 3 controllers which all share the appcatalog factory. This is working very nicely now.

I'm still not sure about the best way to remember my location in the scroll area and make sure it returns to the same spot when coming from detail and returning to the list.