Question

我是棱角分明的新手，并且在重构我的应用程序以匹配John Papa的角度1的风格。然而，这似乎打破了我的观点。我得到Uncaught Error: [$injector:modulerr]。我正在引用他的风格指南来环顾四周，但我发现什么都不合适...但我想说我注入$http的方式有问题

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-module.js：

(function(){
  'use strict';

  angular.module('App.app-controller', []);
})();

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>

非常感谢任何指导。谢谢！

Answer 1

试试这个：

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

获得未捕捉错误：[$ injector：modulerr]

1 个答案: