AngularJS 未能实例化 zingchart 模块
AngularJS failed to instantiate zingchart module
我正在使用 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 依赖项。
谁能指出我的正确之处 direction/describe 我做错了什么?
这是我的 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
中,您需要在 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>
我正在使用 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 依赖项。
谁能指出我的正确之处 direction/describe 我做错了什么?
这是我的 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
中,您需要在 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>