current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I have a page where I display a list of products. When the user clicks on a product I show the product details in another page. This is a part of my routing configuration:

  when('/products', {
        templateUrl: 'views/products.html',
        controller: 'ProductListCtrl'
  }).
  when('/products'/:productId', {
         templateUrl: 'views/product-details.html',
         controller: 'ProductDetailsCtrl'
  }).

As you can see I can only pass productId (which I retrieve using $routeParams) as parameter, which means I need to make another AJAX call to get information about product. But I already have this data on the products page.

So my question is: can I pass a whole Product object to ProductDetailsCtrl instead of just passing productId?

share|improve this question
1  
If you don't want to go back to the server, you'll have to use something like a service to store the product(s) before redirecting, and then retrieve it on the next page. At that point, you don't need to pass the productId –  Ian Jul 20 '14 at 16:23
    
You can configure $http or $resource service to cache data: docs.angularjs.org/api/ng/service/$http#caching –  Yuriy Rozhovetskiy Jul 20 '14 at 16:41
    
@MyTitle please check sharedProperties service i suggested. –  Liad Livnat Jul 20 '14 at 16:44

3 Answers 3

up vote 0 down vote

To actually pass an object into the controller you should use the resolve property. In the end you will have to use your service to retrieve the object. But you will get a more loosely coupled solution by not having to pass the object the service and then back to a controller. Consider the following example: 

 $routeProvider
   .when('/product/:productId', {
   templateUrl: 'product-details.html',
   controller: 'ProductDetailsController',
   resolve: {
      product: productService.getProductById($routeParams.productId);
   }
 });

 productApp.controller("ProductDetailsController", function($scope, product) {
   $scope.product = product;
 });

You can read more about it at the angular docs.

share|improve this answer
up vote 0 down vote

yes you can use shared properties service and pass elements between controllers:

.service('sharedProperties', function () {
    var item = null;
    return {
        getItem: function () {
            return item;
        },
        setItem: function(value) {
            item = value;
        }
    }});

Then before you move to controller you use:

sharedProperties.setItem(your-item);

and after you load the new controller you use:

var model = sharedProperties.getItem();
share|improve this answer
    
Why did you suggest using localStorage? I think it isn't neccessary for this case and might polute the storage with no reason. –  runTarm Jul 20 '14 at 16:34
    
@runTarm thanks for pointing it out, i got confused with another question, here is the service i wanted to post. –  Liad Livnat Jul 20 '14 at 16:44
1  
Your example should be a factory given how you've implemented it (not a service) –  pixelbits Jul 20 '14 at 18:14
up vote 1 down vote

You can use a Product service. In the ProductListCtrl the service would make the http calls and cache the results. The ProductDetailsCtrl would also use Product service. Your service can then return a product from the cache instead of making another http request.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.