Javascript 获取未捕获错误：[$injector:moduler] 我是新的角度，并且在重构我的应用程序的过程中，与John Papa的角度1的风格相匹配。然而，这似乎打破了我的观点。我得到未捕获错误：[$injector:modulerr]。我参考他的风格指南四处看看，但我没有发现任何不合适的地方。。。但是我想说我注入$http_Javascript_Angularjs_Angularjs Directive

Javascript 获取未捕获错误：[$injector:moduler] 我是新的角度，并且在重构我的应用程序的过程中，与John Papa的角度1的风格相匹配。然而，这似乎打破了我的观点。我得到未捕获错误：[$injector:modulerr]。我参考他的风格指南四处看看，但我没有发现任何不合适的地方。。。但是我想说我注入$http

javascript angularjs

Javascript 获取未捕获错误：[$injector:moduler] 我是新的角度，并且在重构我的应用程序的过程中，与John Papa的角度1的风格相匹配。然而，这似乎打破了我的观点。我得到未捕获错误：[$injector:modulerr]。我参考他的风格指南四处看看，但我没有发现任何不合适的地方。。。但是我想说我注入$http,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,app-controller.js： (function() { 'use strict'; angular .module('App.app-controller') .controller('ChocoListCtrl', ChocoListCtrl); ChocoListCtrl.$inject = ['$http']; function ChocoListCtrl($http) { var vm = this; vm.getItemData;

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

app-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>


超甜巧克力糖
巧克力
{{chocolate.type}
{{chocolate.description}}
{{chocolate.price}货币：'$'}
添加到购物车
查看购物车（{{getTotalQuantity（）}}）

非常感谢您的指导。谢谢大家!

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>

您已将模块命名为“App.App controller”，但随后在模板中引用它，如ng App=“App”；重命名应用程序，或者在模板中正确引用它。我之所以这样命名，是因为我在指南中读到，它引用的是控制器？如果我更改了我的ng app=“app.app controller”，则不会显示任何内容。您在他们的代码中发现了什么问题，这是如何解决的？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>