angularJS npm軟件包和依賴項的問題

Question

這是我得到的錯誤

 angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=myApp&p1=Error%3A%2…arJS%2Fangular-my-app%2Fnode_modules%2Fangular%2Fangular.min.js%3A22%3A179)
        at angular.js:38
        at angular.js:4920
        at q (angular.js:403)
        at g (angular.js:4880)
        at eb (angular.js:4802)
        at c (angular.js:1914)
        at Sc (angular.js:1935)
        at ue (angular.js:1820)
        at angular.js:33367
        at HTMLDocument.b (angular.js:3431)

這就是angular.js第38行的樣子（第一行以minErr函數開頭...）

function minErr(module, ErrorConstructor) {
  ErrorConstructor = ErrorConstructor || Error;
  return function() {
    var code = arguments[0],
      template = arguments[1],
      message = '[' + (module ? module + ':' : '') + code + '] ',
      templateArgs = sliceArgs(arguments, 2).map(function(arg) {
        return toDebugString(arg, minErrConfig.objectMaxDepth);
      }),
      paramPrefix, i;

    message += template.replace(/\{\d+\}/g, function(match) {
      var index = +match.slice(1, -1);

      if (index < templateArgs.length) {
        return templateArgs[index];
      }

      return match;
    });

    message += '\nhttp://errors.angularjs.org/1.6.4/' +
      (module ? module + '/' : '') + code;

    for (i = 0, paramPrefix = '?'; i < templateArgs.length; i++, paramPrefix = '&') {
      message += paramPrefix + 'p' + i + '=' + encodeURIComponent(templateArgs[i]);
    }

    return new ErrorConstructor(message);
  };
}

我認為此錯誤是由於我如何調用angularJS庫和其他幾個angularJS npm包導致的。

這是我的html中的heads標簽。

<!doctype html>
<html>
  <head>
    <title> Library </title>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
    <link href="css/style.css" rel="stylesheet" />

    <!-- AngularJS library -->
 <!--  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> -->
 <script src="./node_modules/angular/angular.min.js"></script>
<!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->

<script src="./node_modules/angular-route/angular-route.js"></script>

<script src="./node_modules/ng-file-upload/dist/ng-file-upload-shim.min.js"></script>
<script src="./node_modules/ng-file-upload/dist/ng-file-upload.min.js"></script>

  </head>

<!-- 
  The ng-app is called a directive. It tells AngularJS that the myApp module will live within the <body> element, termed the application's scope. 
  In other words, we used the ng-app directive to define the application scope. -->
  <body ng-app="myApp">
    <div class="header">
      <div class="container">
        <h1>Alexander Library</h1>
      </div>
    </div>

<!-- Like ng-app, ng-controller is a directive that defines the controller scope. This means that properties attached to $scope in MainController become available to use within <div class='main'> -->

    <div class="main" ng-controller="MainController">
      <div class="container">

<!--       This is called an expression - '{{ title }}'. Expressions are used to display values on the page. 
Value of title we show up when we view it in the browser
-->
        <h1>{{ title }}</h1>

      <div>
        <label><h3>Add A Book<h3></label>
      <!-- <form> -->
<!-- Input controls provides data-binding by using the ng-model directive. -->
<!-- With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.
 -->

<!--         <input id="name" ng-model="name" type="text" placeholder="Book Title">
        <input id="price" ng-model="price" type="text" placeholder="Enter Book Price">
        <input id="date" ng-model="date" type="date" placeholder="Publication Date">

        <input id="cover-photo" type="file" ng-model="image"/>

        <input ng-click="addBook()" type="submit" value="Submit">
      <form> -->

<form ng-app="fileUpload" name="form">
  Single Image with validations
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
    ngf-resize="{width: 100, height: 100}">Select</div>
  Multiple files
  <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
  Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>
      </div>

        <h2>{{ promo }}</h2>

<!-- the ng-repeat is another directive. It loops through an array and displays each element. Here, the ng-repeat repeats all the HTML inside <div class="col-md-6"> for each element in the products array. -->
<!-- What does 'product' stand for in 'product in products' ? -->
<!-- We do this so we aren't redundant with our code -->
 <div ng-repeat="product in products" class="col-md-6">
    <div class="thumbnail"> 
    <img ng-src="{{ product.cover }}">
<!-- 'uppercase' is an AngularJS filter -->
        <p class="title">{{ product.name | uppercase }}</p>

<!-- 'currency' is an AngularJS filer. It sends this number into the currency filter. The pipe symbol '|' then takes the output on the left and "pipes" it to the right. -->
<!--   The filter outputs a formatted currency with the dollar sign and the correct decimal places. -->
        <p class="price">{{ product.price | currency }}</p>
<!-- 'date' is an AngularJS filter -->
        <p class="date"> {{ product.pubdate | date }}</p>

      <div class="rating">
<!-- The ng-click is a directive. When <p class="likes"> is clicked, ng-click tells AngularJS to run the plusOne() function in the controller. -->
<!-- We put the $ in front of index in order to select 'this' index from user click -->
        <p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}</p>
        <p class="dislikes" ng-click="minusOne($index)">+ {{ product.dislikes }}</p>       
      </div>

        <!-- <view-summary></view-summary> -->


      </div>
    </div>

    <div class="footer">
      <div class="container">

      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

    <!-- Custom Directives -->
  <script src="js/directives/viewSummary.js"></script>

  </body>
</html>

這就是我所說的依賴關系。

var app = angular.module("myApp", [ 'ngRoute', 'angularFileUpload',]);

我對可能出現錯誤的地方一無所知。 有什么想法嗎？

Answer 1

刪除“ angularFileUpload”依賴項后的逗號。 它應該是

var app = angular.module("myApp", [ 'ngRoute', 'angularFileUpload']);

而且ng-file-upload模塊的名稱是ngFileUpload而不是angularFileUpload

angularJS npm軟件包和依賴項的問題

問題描述

1 個解決方案

解決方案1
0 已采納 2017-05-20 03:06:19

angularJS npm軟件包和依賴項的問題

問題描述

1 個解決方案

解決方案1 0 已采納 2017-05-20 03:06:19

解決方案1
0 已采納 2017-05-20 03:06:19