Question

我正在尝试通过Google Charts Angular Directive Module让Angular使用Google Charts，但似乎无法让它工作。我收到这个错误：

未捕获错误：[$ injector：modulerr]无法实例化模块 myApp由于：错误：[$ injector：nomod]模块'myApp'不是可以！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个论点。

Angular Code：

var myApp = angular.module("myApp", ['googlechart']);

myApp.factory("DataService", ["$http", function ($http){
    var getData = function(callback){
        var url = 'api-url-returns-json';
        $http.get(url).success( function(response) {
            callback(response);
        });
    }
    return {
            getDashboardData: getData
        }
}]);

myApp.controller("dashboardController", ["$scope", "DataService", "ClockProvider", function ($scope, DataService, ClockProvider){
    DataService.getDashboardData(function(data){
        $scope.dashboard = data;
    });
    var intervals = ["0", "30"];
    ClockProvider.run(intervals, function(){
        DataService.getDashboardData(function(data){
            $scope.dashboard = data;
        });
    });
}]);


angular.module("myApp", ["googlechart", "googlechart-docs"]).controller("GenericChartCtrl", function ($scope) {
    $scope.chartObject = {};

    $scope.chartObject.type = "BarChart";

    $scope.onions = [
        {v: "Onions"},
        {v: 3},
    ];

    $scope.chartObject.data = {"cols": [
        {id: "t", label: "Topping", type: "string"},
        {id: "s", label: "Slices", type: "number"}
    ], "rows": [
        {c: [
            {v: "Mushrooms"},
            {v: 3},
        ]},
        {c: $scope.onions}
        {c: [
            {v: "Olives"},
            {v: 31}
        ]},
        {c: [
            {v: "Zucchini"},
            {v: 1},
        ]},
        {c: [
            {v: "Pepperoni"},
            {v: 2},
        ]}
    ]};

    $scope.chartObject.options = {
        'title': 'How Much Pizza I Ate Last Night'
    };
});

HTML：

    <html ng-app="myApp">
        <head>
            <script src="ng-google-chart.js"></script>
            <script src="app.js"></script>
        </head>
        <body>
            <div class="side front" ng-controller="GenericChartCtrl">
                <div google-chart chart="chartObject"">
                </div>
            </div>
        </body>
   </html>

Answer 1

首先，您在声明和调用AngularJS模块之间犯了错误。

要声明模块，请使用：

var myApp = angular.module("<Your app name>", [<Your dependencies>]);

但是，要调用模块（例如创建controller），只需使用：

//Notice that you don't put the [] in .module()
angular.module("myApp").controller

修好后，如果问题仍然存在，请检查参考。请记住以正确的顺序加载所有必需的JS代码（在加载应用程序之前加载依赖项）。例如：

<script src="Your dependencies path"></script>
<script src="Your Angular app path"></script>

Answer 2

看起来你正试图定义myApp 2次：

var myApp = angular.module("myApp", ['googlechart']);

...
angular.module("myApp", ["googlechart", "googlechart-docs"]).

如果您只想调用模块，那么您应该使用：

var myApp = angular.module("myApp", ['googlechart', 'googlechart-docs']);

...
angular.module("myApp").

Answer 3

您无法使用不同的依赖项定义模块两次。

在顶部，您有var myApp = angular.module("myApp", ['googlechart']);

有点下来你有angular.module("myApp", ["googlechart", "googlechart-docs"])....

然而，您可以多次致电angular.module("myApp")，这只会为您提供实际模块的参考。

Google Chart Tools AngularJS指令模块

3 个答案: