CODEWITHSUNDEEP
javascriptangularjs
ajgisme
ajgisme

Reputation: 1765

Google Chart Tools AngularJS Directive Module

I am trying to get Angular working with Google Charts via the Google Charts Angular Directive Module but can't seem to get it to work. I get this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' 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 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>

Upvotes: 2

Views: 723

Answers (3)

Triet Doan
Triet Doan

Reputation: 12085

First, you are mistaking between declaring and calling the AngularJS module.

To declare a module, you use:

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

However, to call the module (to create a controller, for example) just use:

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

After fixing it, if the problem is still there, please check the reference. Remember to load all your necessary JS code, and in the correct order (load your dependencies before loading your app). For example:

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

Upvotes: 1

Jim Aho
Jim Aho

Reputation: 11887

You cannot define a module twice with different dependencies.

At the top you have var myApp = angular.module("myApp", ['googlechart']);

and a bit down you have angular.module("myApp", ["googlechart", "googlechart-docs"])....

You can however call angular.module("myApp") multiple times just fine, this will just give you a reference to your actual module.

Upvotes: 0

Stepan Suvorov
Stepan Suvorov

Reputation: 26186

it looks like you are trying to define myApp 2 times: 

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

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

if you want just to call the module then you should use: 

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

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

Upvotes: 0

Related Questions