カタログの詳細ページを作成するAngularJS

Question

角度の付いたカタログWebサイトを作成する方法を学びます。 多くの製品を含むカタログを作成します。製品の1つをクリックすると、その選択した製品の詳細ページに行きます。製品コントローラ

angular 
    .module('app') 
    .controller('productCtrl',['$scope', 'Product', function($scope,Product){ 
     $scope.title="List Product"; 
     Product.get().then(function(data) { 
      $scope.products = data; 
     }); 
     $scope.products=Product.get(); 
    }]); 

01で私のdirective.js

angular 
    .module('app.directives.productCard',[]) 
    .directive('productCard', function(){ 
     return{ 
      restrict: 'A', 
      scope:{ 
       item:'=' 
      }, 
      templateUrl: "templates/directive/product.html", 
      controller:function($scope){ 
       console.log($scope.item); 
      } 
     }; 
    }); 

に私のサービス製品

angular 
    .module('app') 
    .factory('Product', ['$http', function($http){ 
     return{ 
      get: function(){ 
       return $http.get('/api/products.json').then(function(response){ 
        return response.data; 
       }); 
      } 
     }; 
    }]) 

の私app.jsに

angular 
.module('app', [ 
    'ui.router', 
    'app.directives.productCard' 
]) 
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider){ 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
     .state('home',{ 
      url: '/', 
      templateUrl:'templates/pages/home.html', 
      controller: 'homeCtrl' 
     }) 
     .state('about',{ 
      url: '/about', 
      templateUrl:'templates/pages/about.html' 
     }) 
     .state('product',{ 
      url: '/product', 
      templateUrl:'templates/pages/product.html', 
      controller: 'productCtrl' 
     }) 
     .state('productDetails',{ 
      url: '/product/:id', 
      templateUrl:'templates/pages/productDetails.html', 
      controller: 'productDetailsCtrl' 
     }) 
     .state('contact',{ 
      url: '/contact', 
      templateUrl:'templates/pages/contact.html' 
     }) 
}]) 

私は、ボタンを作りたいときに私ディレクティブのhtmlページ上の私のproduct.html

<section class="product-outer-container"> 
    <section class="product-inner-container"> 
     <div class="container"> 
      <div class="row"> 
       <div ng-repeat="item in products"> 
        <div data-product-card item="item"></div> 
       </div> 
      </div> 
     </div> 
    </section> 
</section> 

上

は

<div class="col-md-3 col-sm-6"> 
    <div class="card"> 
     <img class="card-img-top" ng-src="{{item.image}}" alt="{{item.name}}"> 
     <div class="card-block"> 
     <strong class="card-title">{{item.name}}</strong> 
     </div> 
     <div class="card-block"> 
     <a href="#" class="card-link">Detail</a> 
     </div> 
    </div> 
</div> 

JSONは唯一の私はちょっとこだわってこの

[ 
     { 
     "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 
     }, 
     { 
     "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 
     } 
] 

のようなファイルが含まれています詳細な作業。 私はたくさんのものを逃したことを知っています。私のプロダクトページの 私はちょうどイメージと名前を表示したいです。 詳細ページには、その製品のすべてのデータを表示する予定です。

Answer 1

製品の詳細については、新しい状態を作ることができます。あなたの新しいルートでは、 "：id"または "：name"、または商品を取り込むために使用するカタログ項目の任意の一意のフィールドを追加することができます。商品詳細のための新しいルートを作成した後

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

、特定の製品のために取得するために、あなたのサービスで関数を作成します。

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

あなたは、製品の詳細を取得したら、あなたはあなたの上にそれらをレイアウトすることができますしかし、あなたが欲しいと思う。 UI-ルータを使用した場合は、このようなあなたのコントローラからのIDにアクセスすることができます。

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

     var productId = $stateParams.id; 

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

}]); 

Answer 2

私はディレクティブを使用せずにあなたにこのようないくつかのことを提案し、パラメータで、製品のIDを持っているでしょう。あなたがプロパティとしてのidを持つようにJSONを変更する必要があり

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

以下のコードを見て

[ 
     { 
     "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 
     } 
] 

あなたは、これが

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

あなたが得ることができます使用して詳細ページに移動できますコントローラでクリックされた商品の詳細

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

DEMO