AngularJS 服务将 json 文件数据加载到服务对象中

Question

我对 Angular 还很陌生，我正在尝试按照教程构建一个 Angular 商店应用程序 --> Link

我感到困惑的部分是服务和使用的数据类型。代码结构如下

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

})();

下一步还有另外两个定义了数据的文件：

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 未定义如何更改代码以便 products1 保存 json 文件中的值

Answer 1

如果您想使用 json 文件夹获取数据，请不要使用 $http。 $http 与服务一起使用。您可以使用$resource 来完成。

var tempCall : $resource('data/sample.json');
var query = {};
tempCall.get(query,
    function(response){
        var mydata = JSON.parse(response);
        store.products1 = mydata;
        console.log(response);
    },
    function(error){

    }
);