0
私は、角度の新しい、そしてJohn Papaの角度1のスタイルと一致するように私のアプリをリファクタリングする途中です。私はUncaught Error: [$injector:modulerr]を得る。私の周り見て彼のスタイルガイドを参照していますが、私は場違い何も見つからない...しかし、私は私が$http
アプリ-controller.jsを注入していますどのように何か問題があると言いたい：
(function() {
'use strict';
angular
.module('App.app-controller')
.controller('ChocoListCtrl', ChocoListCtrl);
ChocoListCtrl.$inject = ['$http'];
function ChocoListCtrl($http) {
var vm = this;
vm.getItemData;
vm.addItemToCart;
vm.cartTotal;
vm.addItemToCart;
vm.removeItem;
vm.getTotalQuantity;
vm.clearCart;
vm.cart = [];
function getItemData(){
return $http.get('../data/inventory.json').then(function(data){
vm.products = data.data;
})
}
function addItemToCart(choc) {
var cartItem = readCartItem(choc.id);
if(cartItem == null) {
//if item doesn't exist, add to cart array
vm.cart.push({type: choc.type, id: choc.id, price: choc.price, quantity: 1})
} else {
//increase quantity
cartItem.quantity++;
}
}
function cartTotal() {
var sum = 0;
vm.cart.forEach(function(item) {
sum += item.price * item.quantity;
});
return sum;
}
function getTotalQuantity() {
var totalItems = 0;
vm.cart.forEach(function(item) {
totalItems += item.quantity;
});
return totalItems;
}
function clearCart() {
vm.cart.length = 0;
}
function removeItem(choc) {
vm.cart.splice(choc, 1)
}
function readCartItem(id) {
//iterate thru cart and read ID
for(var i=0; i<vm.cart.length; i++) {
if(vm.cart[i].id === id) {
return vm.cart[i]
}
}
return null;
}
}
})();
アプリ-module.js：
(function(){
'use strict';
angular.module('App.app-controller', []);
})();
アプリ-directive.js：
(function(){
'use strict';
angular
.module('App.app-controller')
.directive('modalDialog', [function() {
return {
scope: {
cart: '=',
show: '=',
close:'&'
},
link: function(scope) {
scope.clearCart = function(){
scope.cart.length = 0;
scope.close();
}
scope.removeItem = function(choc){
scope.cart.splice(choc,1);
}
scope.cartTotal = function(){
var sum = 0;
scope.cart.forEach(function(item){
sum += item.price * item.quantity;
});
return sum;
}
},
templateUrl: '../modal.html'
}
}])
})();
私の見解
<body ng-app="App">
<header class="header">
<div class="header-title">
<h1 class="text-center">SUPER SWEET CHOCOLATE SWEETS</h1>
</div>
</header>
<div ng-controller="ChocoListCtrl">
<section class="container">
<div ng-repeat="(title, chocolates) in products">
<div class="col-md-10">
<h1>Chocolates</h1>
<div class="col-md-12 flex flex-center" ng-repeat="chocolate in chocolates">
<div class="col-md-4">
<div class="choco-desc">
<h3 class="capitalize">{{chocolate.type}}</h3>
<p>{{chocolate.description}}</p>
</div>
</div>
<div class="col-md-4">
<div class="choco-desc">
<h3>{{chocolate.price | currency: '$'}}</h3>
</div>
</div>
<div class="col-md-4">
<div class="choco-desc">
<button type="button" name="button" ng-click="addItemToCart(chocolate)">Add To Cart</button>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<button ng-click='toggleModal()'>View Cart ({{getTotalQuantity()}})</button>
<div ng-show="modalShown">
<modal-dialog cart='cart' show="modalShown" close="toggleModal()" width='auto' height='100%'></modal-dialog>
</div>
</div>
</div>
</section>
</div>
</body>
ご指導いただきありがとうございます。ありがとうございました！
あなたはモジュールのApp.appコントローラ 'という名前てきましたが、その後、あなたはNGアプリ=「アプリケーション」のようなテンプレートでそれを参照します。アプリの名前を変更するか、テンプレート内で正しく参照するかのいずれかです。 – rrd
ガイドで読んだことからコントローラを参照しているので、私はそのように名前を付けましたか？私がng-app = "App.app-controller"を変更しても何も表示されません。 –