0

私はAngularを初めて使用し、チュートリアルに従ってAngularストアアプリを構築しようとしています->リンク

私が混乱する部分は、使用されるサービスとデータの種類です。コードの構造は次のとおりです。

app.js

(function(){
 var storeApp = angular.module('AngularStore', ['ngRoute']);

 storeApp.config(function($routeProvider) {
   $routeProvider
  .when('/store', {
    templateUrl: 'partials/store.html',
    controller: 'storeController'
  })
  .when('/products/:productSku', {
    templateUrl: 'partials/product.html',
    controller: 'storeController'
  })
  .when('/products1/:productId', {
    templateUrl: 'partials/product1.html',
    controller: 'storeController'
  })
  .when('/cart', {
    templateUrl: 'partials/shoppingCart.html',
    controller: 'storeController'
  })

   .otherwise({
    redirectTo: '/store'
  });
});

storeApp.controller('storeController', function($scope, $http,$routeParams, DataService) {

// get store and cart from service
$scope.store = DataService.store;
$scope.cart = DataService.cart;

// use routing to pick the selected product
if ($routeParams.productSku != null) {
    $scope.product = $scope.store.getProduct($routeParams.productSku);
}

if ($routeParams.productId != null) {
    $scope.product1 = $scope.store.getProduct1($routeParams.productId);
}

});


 /**create a data service that provides a store and a shopping cart   that will be shared by all views (instead of creating fresh ones for each view). **/

 storeApp.factory("DataService", function ($http) {

// create store
var myStore = new store();

// create shopping cart
var myCart = new shoppingCart("AngularStore");

// return data object with store and cart
return {
    store: myStore,
    cart: myCart
};
});

})();

次のデータが定義されている他の 2 つのファイルがあります。

store.js

function store() {

 this.products1=[
new product1("1", "Grr", "Eat one every day to keep the doctor away!", 12, 90, 0, 2, 0, 1, 2),
new product1("2", "Grr2", "Guacamole anyone?", 16, 90, 0, 1, 1, 1, 2)
 ];

this.products = [
    new product("APL", "Apple", "Eat one every day to keep the doctor away!", 12, 90, 0, 2, 0, 1, 2),
    new product("AVC", "Avocado", "Guacamole anyone?", 16, 90, 0, 1, 1, 1, 2),
    new product("BAN", "Banana", "These are rich in Potassium and easy to peel.", 4, 120, 0, 2, 1, 2, 2)
];

}



 store.prototype.getProduct1 = function (id) {   
     for (var i = 0; i < this.products1.length; i++) {
         if (this.products1[i].id == id)
             return this.products1[i];
     }
     return null;
 }

store.prototype.getProduct = function (sku) {
for (var i = 0; i < this.products.length; i++) {
    if (this.products[i].sku == sku)
        return this.products[i];
}
return null;
}

product.js

 function product(sku, name, description, price, cal, carot, vitc, folate, potassium, fiber) {
this.sku = sku; // product code (SKU = stock keeping unit)
this.name = name;
this.description = description;
this.price = price;
this.cal = cal;
 }

 function product1(id, name, desc, price, color, type, category, photo) {
this.id = id; // product code (id = stock keeping unit)
this.name = name;
this.desc = desc;
this.price = price;
this.color = color;
this.type=type;
this.category=category;
this.photo=photo;
 }

私が立ち往生しているのは、jsonファイルを使用することにした場合、次のように言うことです

$http.get('data/sample.json').success(function(data) {
  var mydata = JSON.parse(data);
   store.products1 = mydata;
   console.log(data);
 });

私のコントローラーコードでは、コンソールに表示されるのは Array[Object, Object....] で、ブラウザーで開発ツールをチェックインすると、各オブジェクトに値が含まれます。上記のコードをサービス関数、つまり store.js に追加しようとすると、http が定義されていません product1 が json ファイルの値を保持するようにコードを変更するにはどうすればよいですか

4

1 に答える 1