CODEWITHSUNDEEP
angularjs
celsomtrindade
celsomtrindade

Reputation: 4671

AngularJs show products in multiple pages

I'm building a webApp in AngularJs where I have some products. These products are shown in different pages with different states (favorite/ not favorite), for example:

It also has an option of 'favorite product', which is enabled only if the user is logged.

My doubt is, how can I:

The problem I'm facing right now is because in the category page, I need to filter the list. Reading some articles, they recomend to not use filter | {condition} inside ng-repeat, instead, use $filter inside controller. Since this app deal with a lot of products I'm trying to stick with it (also, already did some basic tests and had improvement).

What I have:

Currently, since I'm using ui-router, I'm loading the data on the resolve of the state and then I'll pass it to my mainController.

.state('app', { //Main State
    resolve: {
        mainProduct: function (factMain) {
            var func = 'get_product';
            return factMain.methodGet(func);
        }
    }
})

Ok, now I have the list and can use it. In the mainController I check if the user is logged in each stateChangeStart, if he's logged, I'll load the list of favorites he has and update the products with an angular.forEach. All of this inside the mainController.

After that I need to show these products based on the page the user is, for example, if he's in the homepage, there is no problem, everything is done, I just need to show the products.

But if he's in the category 'shoes', I need to filter this list to show only 'shoes' and also, check for the favorites products.

I'm getting the list inside the categoryController with a reference from the main state resolve, like this:

.state('category/:idCategory', { //Main State
    resolve: {
        categoryProduct: function (mainProduct) {
            return mainProduct;
        }
    }
})

But then I'll have to re-do everything again... Check if user is logged, apply favorites, filter the list, send to the HTML.

I'd like to optimize this process. I tried to use a factory to set this products list, but since it has some $http waiting for a promise, if I first enter the 'Category Page' before the home page, the products aren't set yet.

Inside the factory I tried to use these functions: setProduct, getProduct, clearProduct (to clear the favorites states when user log out).

Any ideas on how to solve this?

Upvotes: 1

Views: 934

Answers (1)

sjokkogutten
sjokkogutten

Reputation: 2095

To answer you last comment first, you could store the results of a request and then retrieve and re-use them when you need. First of all, I would place all requests in a service or factory.

app.factory('DataService', function($http) {
  var categories;
  var requestCategories = function() {
    $http.get("/api/getCategories").then(
        function(results){
            categories = results;
        });
  };
  var getCategories = function() {
    return categories;
  };
  return {
    requestCategories : requestCategories, // this will make a http request and store the result
    getCategories : getCategories // this will call the stored result (without making a http request)
  }
});

Now you have two functions, requestCategories and getCategories.

requestCategories will make the http request when called and store the return values in a variable getCategories will get the values from the variable, without making a request

myApp.controller('MyController', function ($scope, DataService) {
  var init = function (){
    DataService.requestCategories(); // this will make the http request and store the result
    $scope.categories = DataService.getCategories(); // this will get the result
  };

  var justGetValues = function(){
    $scope.categories= DataService.getCategories(); // this will get the result (without making a http request)
  };
});

Now that you have all the categories stored you can now angular filter to filter and toggle what to display on 

<div ng-repeat="category in categories | filter:{ type: by_type }"> // by property

or

<div ng-repeat="category in categories | filter: by_favorites"> // by custom filter

and code for your custom filter:

app.filter('by_favorites', function () {
  return function (items) {
    var filtered = [];
    // do logic here
    return filtered;
  };
});

Upvotes: 1

Related Questions