troubleshooting Question

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

Avatar of Leonard Zakoor
Leonard Zakoor asked on
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('', {});

    unarcoQS.factory('productService', function ($resource) {
      return $resource('',{PartNumber: "@PartNumber"});

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

        // console.log($routeParams);

    // 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) {

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


    }]); //end prodCtrl

Here's a link to the demo:

Click on a product to go to the product detail page
Any and all help is appreciated!
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