Ошибка Uncaught: [$ инжектор: modulerr] http://errors.angularjs.org/1.7 - PullRequest
Новая
       28

Ошибка Uncaught: [$ инжектор: modulerr] http://errors.angularjs.org/1.7

0 голосов
/ 14 апреля 2019

Я пытаюсь добавить автозаполнение в свой проект HTML angular-js и пытаюсь использовать asp.новый API передает данные в текстовое поле автозаполнения.

Я добавил angular.module("invoicing", ["xeditable", "ui.bootstrap","ngMaterial"])

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mc Computer</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="/assets/css/style.css" integrity="" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
  <!-- new update -->
  <script src="/assets/js/angular-1.7.8/angular.js" crossorigin="anonymous"></script>
  <script src="/assets/js/angular-1.7.8/angular-animate.js"></script>
  <script src="/assets/js/angular-1.7.8/angular-messages.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="/assets/js/main.js" crossorigin="anonymous"></script>


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>


</head>
<body ng-app="invoicing" ng-controller="InvoiceCtrl" >
  <div class="container" width="800px" id="invoice" >
    <div class="row">
      <div class="col-xs-12 heading">
        INVOICE
      </div>
    </div>
    <div class="row branding">
      <div class="col-xs-6">
        <div class="invoice-number-container">
          <label for="invoice-number">Invoice #</label><input type="text" id="invoice-number" ng-model="invoice.invoice_number" />
        </div>
      </div>
    </div>
    <div class="row infos">
      <div class="col-xs-6">
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.name"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.web_link"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.address1"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.address2"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.customer_info.postal"/></div>
        <div class="input-container" data-ng-hide='printMode'>
          <select ng-model='currencySymbol' ng-options='currency.symbol as currency.name for currency in availableCurrencies'></select>
        </div>
      </div>
      <div class="col-xs-6 right">
        <div class="input-container"><input type="text" ng-model="invoice.company_info.name"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.web_link"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.address1"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.address2"/></div>
        <div class="input-container"><input type="text" ng-model="invoice.company_info.postal"/></div>
      </div>
    </div>
    <div class="items-table">
      <div class="row header">
        <div class="col-xs-1">&nbsp;</div>
        <div class="col-xs-5">Description</div>
        <div class="col-xs-2">Quantity</div>
        <div class="col-xs-2">Cost {{currencySymbol}}</div>
        <div class="col-xs-2 text-right">Total</div>
      </div>
      <div class="row invoice-item" ng-repeat="item in invoice.items" ng-animate="'slide-down'">
        <div class="col-xs-1 remove-item-container">
          <a href ng-hide="printMode" ng-click="removeItem(item)" class="btn btn-danger">[X]</a>
        </div>
      <div class="col-xs-5 input-container"  id="TypeaheadCtrl">

            <a href="#" editable-text="user.state" e-uib-typeahead="state for state in states | filter:$viewValue | limitTo:8">
              {{ user.state || 'empty' }}
            </a>
        </div>
        <div class="col-xs-2 input-container">
          <input ng-model="item.qty" value="1" size="4" ng-required ng-validate="integer" placeholder="Quantity" />
        </div>
        <div class="col-xs-2 input-container">
          <input ng-model="item.cost" value="0.00" ng-required ng-validate="number" size="6" placeholder="Cost" />
        </div>
        <div class="col-xs-2 text-right input-container">
          {{item.cost * item.qty | currency: currencySymbol}}
        </div>
      </div>
      <div class="row invoice-item">
        <div class="col-xs-12 add-item-container" ng-hide="printMode">
          <a class="btn btn-primary" href ng-click="addItem()" >[+]</a>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-10 text-right">Sub Total</div>
        <div class="col-xs-2 text-right">{{invoiceSubTotal() | currency: currencySymbol}}</div>
      </div>
      <div class="row">
        <div class="col-xs-10 text-right">Tax(%): <input ng-model="invoice.tax" ng-validate="number" style="width:43px"></div>
        <div class="col-xs-2 text-right">{{calculateTax() | currency: currencySymbol}}</div>
      </div>
      <div class="row">
        <div class="col-xs-10 text-right">Grand Total:</div>
        <div class="col-xs-2 text-right">{{calculateGrandTotal() | currency: currencySymbol}}</div>
      </div>
    </div>
    <div class="row noPrint actions">
      <a href="#" class="btn btn-primary" ng-show="printMode" ng-click="printInfo()">Print</a>
      <a href="#" class="btn btn-primary" ng-click="clearLocalStorage()">Reset</a>
      <a href="#" class="btn btn-primary" ng-hide="printMode" ng-click="printMode = true;">Turn On Print Mode</a>
      <a href="#" class="btn btn-primary" ng-show="printMode" ng-click="printMode = false;">Turn Off Print Mode</a>
    </div>
  </div>
</body>
</html>

файл моего контроллера js: 


angular.module("invoicing", ["ui.bootstrap","ngMaterial"])

// The default logo for the invoice
.constant('DEFAULT_LOGO', 'images/metaware_logo.png')

// The invoice displayed when the user first uses the app
.constant('DEFAULT_INVOICE', {
  tax: 13.00,
  invoice_number: 10,
  customer_info: {
    name: 'Mr. John Doe',
    web_link: 'John Doe Designs Inc.',
    address1: '1 Infinite Loop',
    address2: 'Cupertino, California, US',
    postal: '90210'
  },
  company_info: {
    name: 'Metaware Labs',
    web_link: 'www.metawarelabs.com',
    address1: '123 Yonge Street',
    address2: 'Toronto, ON, Canada',
    postal: 'M5S 1B6'
  },
  items:[
    { qty: 10, description: 'Gadget', cost: 9.95 }
  ]
})

// Service for accessing local storage
.service('LocalStorage', [function() {

  var Service = {};

  // Returns true if there is a logo stored
  var hasLogo = function() {
    return !!localStorage['logo'];
  };

  // Returns a stored logo (false if none is stored)
  Service.getLogo = function() {
    if (hasLogo()) {
      return localStorage['logo'];
    } else {
      return false;
    }
  };

  Service.setLogo = function(logo) {
    localStorage['logo'] = logo;
  };

  // Checks to see if an invoice is stored
  var hasInvoice = function() {
    return !(localStorage['invoice'] == '' || localStorage['invoice'] == null);
  };

  // Returns a stored invoice (false if none is stored)
  Service.getInvoice = function() {
    if (hasInvoice()) {
      return JSON.parse(localStorage['invoice']);
    } else {
      return false;
    }
  };

  Service.setInvoice = function(invoice) {
    localStorage['invoice'] = JSON.stringify(invoice);
  };

  // Clears a stored logo
  Service.clearLogo = function() {
    localStorage['logo'] = '';
  };

  // Clears a stored invoice
  Service.clearinvoice = function() {
    localStorage['invoice'] = '';
  };

  // Clears all local storage
  Service.clear = function() {
    localStorage['invoice'] = '';
    Service.clearLogo();
  };

  return Service;

}])

.service('Currency', [function(){

  var service = {};

  service.all = function() {
    return [
      {
        name: 'British Pound (£)',
        symbol: '£'
      },
      {
        name: 'Canadian Dollar ($)',
        symbol: 'CAD $ '
      },
      {
        name: 'Euro (€)',
        symbol: '€'
      },
      {
        name: 'Indian Rupee (₹)',
        symbol: '₹'
      },
      {
        name: 'Norwegian krone (kr)',
        symbol: 'kr '
      },
      {
        name: 'US Dollar ($)',
        symbol: '$'
      }
    ]
  }

  return service;

}])

// Main application controller
.controller('InvoiceCtrl', ['$scope', '$http', 'DEFAULT_INVOICE', 'DEFAULT_LOGO', 'LocalStorage', 'Currency',
  function($scope, $http, DEFAULT_INVOICE, DEFAULT_LOGO, LocalStorage, Currency) {

  // Set defaults
  $scope.currencySymbol = '$';
  $scope.logoRemoved = false;
  $scope.printMode   = false;

  (function init() {
    // Attempt to load invoice from local storage
    !function() {
      var invoice = LocalStorage.getInvoice();
      $scope.invoice = invoice ? invoice : DEFAULT_INVOICE;
    }();

    // Set logo to the one from local storage or use default
    !function() {
      var logo = LocalStorage.getLogo();
      $scope.logo = logo ? logo : DEFAULT_LOGO;
    }();

    $scope.availableCurrencies = Currency.all();


  })()
  // Adds an item to the invoice's items
  $scope.addItem = function() {
    $scope.invoice.items.push({ qty:0, cost:0, description:"" });
  }

  // Toggle's the logo
  $scope.toggleLogo = function(element) {
    $scope.logoRemoved = !$scope.logoRemoved;
    LocalStorage.clearLogo();
  };

  // Triggers the logo chooser click event
  $scope.editLogo = function() {
    // angular.element('#imgInp').trigger('click');
    document.getElementById('imgInp').click();
  };

  $scope.printInfo = function() {
    window.print();
  };

  // Remotes an item from the invoice
  $scope.removeItem = function(item) {
    $scope.invoice.items.splice($scope.invoice.items.indexOf(item), 1);
  };

  // Calculates the sub total of the invoice
  $scope.invoiceSubTotal = function() {
    var total = 0.00;
    angular.forEach($scope.invoice.items, function(item, key){
      total += (item.qty * item.cost);
    });
    return total;
  };

  // Calculates the tax of the invoice
  $scope.calculateTax = function() {
    return (($scope.invoice.tax * $scope.invoiceSubTotal())/100);
  };

  // Calculates the grand total of the invoice
  $scope.calculateGrandTotal = function() {
    saveInvoice();
    return $scope.calculateTax() + $scope.invoiceSubTotal();
  };

  // Clears the local storage
  $scope.clearLocalStorage = function() {
    var confirmClear = confirm('Are you sure you would like to clear the invoice?');
    if(confirmClear) {
      LocalStorage.clear();
      setInvoice(DEFAULT_INVOICE);
    }
  };

  // Sets the current invoice to the given one
  var setInvoice = function(invoice) {
    $scope.invoice = invoice;
    saveInvoice();
  };

  // Reads a url
  var readUrl = function(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        document.getElementById('company_logo').setAttribute('src', e.target.result);
        LocalStorage.setLogo(e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  };

  // Saves the invoice in local storage
  var saveInvoice = function() {
    LocalStorage.setInvoice($scope.invoice);
  };

  // Runs on document.ready
  angular.element(document).ready(function () {
    // Set focus
   // document.getElementById('invoice-number').focus();

    // Changes the logo whenever the input changes
    //document.getElementById('imgInp').onchange = function() {
     // readUrl(this);
   // };
   readUrl(this);
  });

}])

.controller('InvoiceCtrl', function($scope) {
  $scope.user = {
    state: 'Arizona'
  };

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
});

и в консоли браузера, У меня есть это: 

angular-1-7-8.min.js:7 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.8/

когда новый обновленный сценарий я получил следующее сообщение

Uncaught Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля-фактуры из-за: Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля ngMaterial из-за: Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля ngAria из-за: Ошибка: [$ injector: nomod] Модуль 'ngAria' недоступен!Вы либо неправильно написали имя модуля, либо забыли загрузить его.При регистрации модуля убедитесь, что вы указали зависимости в качестве второго аргумента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...