2016-12-01 96 views
0

我是相當新的角度,我試圖建立一個角商店應用下面的教程 - >LinkAngularJS服務JSON文件數據加載到一個服務對象

我感到困惑的部分是服務和使用的數據種類。代碼的結構如下

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

產物。 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); 
}); 
在我的控制器代碼和我所得到的控制檯上

是數組[對象,對象...]分別與當我在瀏覽器中查看我的開發工具時,具有值的對象。當我嘗試在我的服務功能添加上面的代碼即store.js我得到的HTTP沒有定義如何更改代碼,使產品1從JSON文件保存的值

+0

的可能的複製[AngularJS:工廠$ http.get JSON文件(http://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file) – hurricane

+0

@hurricane我做看看那個,並嘗試了什麼建議我碰到的問題是定義的商店和產品功能是這些單獨的對象,我不清楚我應該如何或在哪裏放在http.get調用json文件 – Yaba

回答

-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){ 

    } 
); 
+0

我將如何使用它?我相當新的角度,所以我不明白...對不起 – Yaba