为什么我不能渲染这个 angularJS 代码？答案

【问题标题】：Why can't I render this angularJS code?为什么我不能渲染这个 angularJS 代码？
【发布时间】：2016-01-17 20:15:01
【问题描述】：

此代码取自以下使用 ZingChart 的教程。 http://www.zingchart.com/blog/2015/03/05/zingchart-angularjs/

我的代码如下所示：

//my-zingchart.html
<html ng-app="myApp">
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
   <script src="http://cdn.zingchart.com/zingchart.min.js">
   <script src="node_modules/zingchart-angularjs/src/zingchart-angularjs.js">
   <script>
       var app = angular.module('myApp',['zingchart-angularjs']);

        app.controller('MainController', function($scope){
        $scope.myData = [1,4,5,5,10];
});
   </script>
</head>
<body>
 <div ng-controller="MainController">
<zingchart id="chart-1" zc-values="myData"></zingchart>
</div>
 </body>
</html>

当我尝试在 chrome 中渲染它时，我只得到一个空白页面，并且出现以下错误：

未捕获的错误：[$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%...gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17 %3A381)

我寻找过类似的错误，但他们的解决方案似乎无法解决我的问题。

【问题讨论】：

首先确保 zingchart 角度模块正在加载
@inorganik，如何确保模块正在加载？
使用 Angular 的开发版本来获得更详细的错误输出和堆栈跟踪。缩小版会创建类似这样的链接，您必须访问他们的网站才能进行更多解释
查看浏览器开发工具网络以确保路径正确且文件正在加载
@charlietfl 谢谢，路径很好

标签： javascript angularjs zingchart

【解决方案1】：

关闭你的脚本标签！

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://cdn.zingchart.com/zingchart.min.js"></script>
    <script src="node_modules/zingchart-angularjs/src/zingchart-angularjs.js"></script>
    <script>
        var app = angular.module('myApp', ['zingchart-angularjs']);

        app.controller('MainController', function ($scope) {
            $scope.myData = [1, 4, 5, 5, 10];
        });
    </script>
</head>
<body>
    <div ng-controller="MainController">
        <zingchart id="chart-1" zc-values="myData"></zingchart>
    </div>
</body>
</html>

结果

【讨论】：