Create Detail Page For Catalog With Angularjs

i try to learn how to create a catalog website with angular. I create a catalog that contain many products. when i click one of the product, i intend to go to the detail page of th

Solution 1:

I would suggest you some thing like this without use of directives and have the id of the product in the parameter. Look the code below

var app = angular.module('plunker', ['ui.router']);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World'; 
});
app.config(function($stateProvider){

  $stateProvider
  .state('home',{
        url: '/home',
        templateUrl:'listing.html',
        controller: 'productlistCtrl',
        param :{
          id: null


        }

    })
   .state('product',{
        url: '/product/:id',
        templateUrl:'product.html',
        controller: 'productCtrl',
        param :{
          id: null


        }

    })

});
app.controller('productlistCtrl', function($http,$scope) {
  $http.get('data.json').success(function(response){
    $scope.Data=response;
  console.log(response);

  })
  .error(function(){

    //error handling
  });
});
  app.controller('productCtrl', function($http,$stateParams,$scope) {
  console.log("REACHED HERE");
  $scope.productID= $stateParams.id;
  console.log($scope.productID);
});

You should modify the json to have id in it as a property

[{"id":1,"name":"one","image":"http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/mens-better-than-naked-jacket-AVMH_LC9_hero.png","description":"Shop Now","price":132,"qty":2},{"id":2,"name":"two","image":"http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/womens-better-than-naked-jacket-AVKL_NN4_hero.png","description":"lorem ipsum dolor","price":126,"qty":22}]

You can navigate to the details page using this

<ahref="#/product/{{item.id}}"class="card-link">Detail</a>

You can get the details of the product which is clicked in the controller

app.controller('productCtrl', function($http,$stateParams,$scope) {
      console.log("REACHED HERE");
      $scope.productID= $stateParams.id;
      console.log($scope.productID);
    });

Here is the live plunker for the DEMO

Solution 2:

You can make a new state for product details. In your new route you can add a ":id" or ":name" or any unique field in your catalog items which will be use to fetch for the product.

$stateProvider
   .state('product',{
    url: '/product/:id',
    templateUrl:'templates/pages/productDetails.html',
    controller: 'productDetailsCtrl'
})

After creating the new route for product detail, create a function in your service to fetch for the specific product:

angular
    .module('app')
    .factory('Product', ['$http','$q', '$filter', function($http, $q, $filter){
        return{
            getProductDetails: function(id){

                var defer = $q.defer;

               $http.get('/api/products.json').then(function(response){

                    var foundItem = $filter('filter')(response.data, {id:id}, true);

                    defer.resolve(foundItem[0]);

                },function(error){

                    defer.reject(error);

                });

                return defer.promise;
            }
        };
    }])

Once you get the product details, you can lay them out on your view however you want. You can access the id from your controller like this if using ui-router:

angular
    .module('app')
    .controller('productDetailsCtrl',['$scope', 'Product', function($scope, $stateParams, Product){

        var productId = $stateParams.id;

        Product.getProductDetails(productId).then(function(data) {
            $scope.productsDetails = data;
        });

}]);