troubleshooting Question

How do I pass data to my factory properly using ngRoute and ngResource?

Avatar of Leonard Zakoor
Leonard Zakoor asked on
AngularJavaScript
21 Comments1 Solution376 ViewsLast Modified:
I'm new to Angular and still learning. I have an angular ecommerce app I'm building.

I have a category partial and a product partial. I'm using `ng-view` and `$routeProvider` for the navigation.

What I'm unable to figure out is how to pass this `PartNumber` to my product service factory in order to get the details. I'm not sure I setup the factory right.  

Here's my controller:

    var unarcoQS = angular.module('unarcoQS',['ngResource', 'ngCart', 'ngRoute', 'angular.filter']);

    // Factories
    unarcoQS.factory('categoryService', function ($resource) {
      return $resource('http://example.com:7444/api/products/', {});
    });

    unarcoQS.factory('productService', function ($resource) {
      return $resource('http://example.com:7444/api/products/:PartNumber',{PartNumber: "@PartNumber"});
    });

    unarcoQS.config(['$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider){
        $routeProvider
        .when('/',{
          templateUrl:'template/home.html', 
          controller: "homeCtrl"
        })
        .when('/category/',{
          templateUrl:'template/category.html', 
          controller: "catCtrl"
        })
        .when('/product/:PartNumber', {
          templateUrl: 'template/product.html',
          controller: ['$routeParams', function($routeParams) {
                          var self=this;
                          self.id = $routeParams;
                          return $routeParams;
                      }],
          controllerAs: 'prodCtrl'
        })
        .otherwise({redirectTo:'/'});

        // console.log($routeParams);
        $locationProvider.html5Mode(false);
    }]);

    // Controllers
    unarcoQS.controller ('homeCtrl', ['$scope', 'productService', 'ngCart', '$filter', function($scope, productService, ngCart) {

    }]); //end homeCtrl

    unarcoQS.controller ('catCtrl', ['$scope', 'categoryService', 'ngCart', '$filter', function($scope, categoryService, ngCart) {
      ngCart.setTaxRate(7.5);
      ngCart.setShipping(2.99);

      var queryParams = {};
      categoryService.query(queryParams, {}, function (response) {
        $scope.products = response;
      });

      $scope.filtering = function(filter){
        $scope.catFilter = filter;
        // console.log(filter);
      };
    }]); //end catCtrl


    unarcoQS.controller ('prodCtrl', ['$scope', 'productService', 'ngCart', '$route', '$routeParams', '$resource', function($scope, productService, ngCart, $route, $routeParams, $resource) {
      id = $routeParams.PartNumber
      $scope.product = productService.get({PartNumber: id});

      console.log($scope.product);

    }]); //end prodCtrl

Here's a link to the demo:
http://ur.430designs.com/quick-ship/#/category/

Click on a product to go to the product detail page
Any and all help is appreciated!
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 21 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 21 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros