AngularJS 无法实例化 zingchart 模块答案

【问题标题】：AngularJS failed to instantiate zingchart moduleAngularJS 无法实例化 zingchart 模块
【发布时间】：2018-01-16 05:03:24
【问题描述】：

我正在使用 mean.io 堆栈构建一个网络应用程序。我正在尝试添加“zingchart-angularjs”依赖项，但出现此错误：

[$injector:nomod] Module 'zingchart-angularjs' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我是 Angular 的新手，所以我很困惑为什么我可以让“ngMaterial”依赖项工作得很好，但不是 zingchart 依赖项。

有人能指出我正确的方向/描述我做错了什么吗？

这是我的 js 文件——dashboard.js

(function() {
'use strict';

/* jshint -W098 */

function DashboardController($scope, Global, Dashboard, $stateParams) {
    $scope.global = Global;
    $scope.package = {
        name: 'dashboard'
    };
}

angular
    .module('mean.dashboard', ['ngMaterial', 'zingchart-angularjs'])
    .controller('DashboardController', DashboardController);

DashboardController.$inject = ['$scope', 'Global', 'Dashboard', '$stateParams'];

})();

index.html

    <!DOCTYPE html>

<head>
  <script type="text/javascript" src="angular.min.js"></script>
  <script type="text/javascript" src="angular-animate.js"></script>
  <script type="text/javascript" src="angular-aria.js"></script>
  <script type="text/javascript" src="angular-material.js"></script>
  <script type="text/javascript" src="zingchart.min.js"></script>
  <script type="text/javascript" src="zingchart-angularjs.js"></script>
  <script type="text/javascript" src="dashboard.js"></script>
</head>


<body ng-app="mean.dashboard" layout="row" ng-cloak>

  <div class="container" layout="row" flex>
    <md-sidenav layout="column" class="md-whiteframe-10dp" md-is-locked-open='true'>
      <md-list>
        <md-list-item>
          <md-button>
            Dashboard
          </md-button>
        </md-list-item>
      </md-list>
    </md-sidenav>
    <md-content id="content" flex>
      <ng-view>
        <zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
      </ng-view>
    </md-content>
  </div>
</body>

</html>

【问题讨论】：

输入您的index.html 以查看您如何包含依赖项。

标签： javascript angularjs dependency-injection mean.io

【解决方案1】：

在您的index.html 中，您需要在dashboard.js 之前包含zingchart-angularjs script；

另外，我在你的index.html 中没有看到angular-material scripts ngMaterial：

我将此添加到 index.html 并且效果很好：

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="angular-aria.js"></script>
<script type="text/javascript" src="angular-material.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
<script type="text/javascript" src="dashboard.js"></script>

https://github.com/angular/material

【讨论】：

当我在浏览器中打开它时得到一个完全空白的页面
这对我有用，我看到一个按钮，上面写着Dashboard home，console 没有错误
也许你是误会了。只有当我将“zingchart-angularjs”依赖项添加到我的dashboard.js 文件时，浏览器才会显示为空白。如果我删除该依赖项，使其唯一的角度 .module('mean.dashboard', ['ngMaterial'])... 然后我在浏览器中呈现仪表板 .... 按照本文档的第 2 步github.com/zingchart/ZingChart-AngularJS
不，我完全理解。当我测试你的代码时，我看到了这个错误：[$injector:nomod] Module 'ngMaterial' is not available!，这是因为你的index.html 中没有ngMaterial 脚本，然后我添加了脚本，它工作正常，我没有看到那个错误也不是zingchart-js，我在浏览器中看到了按钮。
我应该提到我使用凉亭吗？这不是重点，所以我不需要在我的 html 中包含依赖项吗？