Question

我对Angular很新，我正在尝试按照教程构建角度存储应用程序 - ＆gt; 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){

    }
);

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

1 个答案: