CODEWITHSUNDEEP
angularjsvis.js
Mini
Mini

Reputation: 149

vis.js error in angular JS

I am trying to use vis.js library to visualize a simple network. My controller is as follows

var App = angular.module('App', ['ngRoute','ngVis']);


    App.controller('visController', ['$scope','$http','$window','VisDataSet',function($scope,$http,$window,VisDataSet)
    {
        $scope.Nodes = [];
        $scope.Edges = [];
        $http.post('/getNetworkData').success(function(response) 
        {
            $scope.Nodes = response.Nodes;
            $scope.Edges = response.Edges;
            console.log($scope.Edges);
            console.log($scope.Nodes);
        });

        var network = null;

        var destroy = function(){
            if(network!=null)
            {
                network.destroy();
                network = null;
            }    
        }

        var draw = function()
        {
            destroy();
            var nodes = new vis.Dataset($scope.Nodes);
            var edges = new vis.Dataset($scope.Edges);
            var container = angular.element( document.querySelector('#mynetwork'));
            console.log(container);
            var data = {
                nodes : nodes,
                edges : edges
            };

            var options = {
                interaction: {
                  navigationButtons: true,
                  keyboard: true
                }
            };
            network = new vis.Network(container,data,options);
            network.on('select', function(params) {
                console.log("clicked");
            });
        }
        draw();

    }]);

and my html div is as follows

     <!DOCTYPE html>
<html ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Visualization Page</title>
        <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/bootstrap/normalize.css">
        <link rel="stylesheet" href="css/bootstrap/style.css">
        <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
        <link href="css/visualizationPage/style_vispage.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular-route.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="css/bootstrap/jquery.min.js"></script>
        <script src="css/bootstrap/bootstrap.min.js"></script>
        <script src="js/ng-file-upload-shim.min.js"></script> 
        <script src="js/ng-file-upload.min.js"></script>
        <script src="controllers/controller.js"></script>
        <script src="js/ngDialog.js"></script>
        <link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog.css">
        <link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog-theme-default.css">
        <script src="js/vis.js"></script>
        <script src="js/exampleUtil.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap/vis.css">
        <script src="js/googleAnalytics.js"></script>
    </head>    
    <body ng-controller="visController">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col-md-2 sidebar">
                    <ul class="nav nav-sidebar">
                        <li class="active"><a href="/visualization">Visualization<span class="sr-only">(current)</span></a></li>
                        <li><a href="/data">Data</a></li>
                    </ul>
                </div>
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    <h2 class="page-header">Visualization</h2>
                    <div id="mynetwork">

                    </div>  
                </div>
            </div>
        </div>
    </body>
</html>

I am getting an error Uncaught Error: [$injector:modulerr] when i try to load the page. Can someone tell me what I am missing in my code.

My error is as follows

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.2/$injector/modulerr?p0=n...)
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:40:60
    at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:304
    at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
    at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:43:164)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:20:463

Upvotes: 0

Views: 573

Answers (1)

Mike Feltman
Mike Feltman

Reputation: 5176

First, this is unrelated to your issue, but there are several things that should be cleaned up here.

  1. Eliminate the use of success in your call to $http.post and replace it with then. Success is depracated.

  2. It looks like this should be a call to $http.get, not post.

  3. Draw should be called from the then method of the call to $http.get rather than at the end of your controller initialization. The way this is currently written you cannot guarantee that this call is complete and the data is available before your draw function executes.

As for the missing module, it is most likely a pathing issue, spelling issue or an issue with the order that you are loading your javascript files. That code would of course be in your html.

You're loading jquery more than once. You only need it once. When you're using angular with Jquery always load jquery first. Angular will make use of it instead of JQLite in those circumstances. I don't see anything else, but it's possible that loading JQuery after Angular and then loading it again is stepping on something.

Upvotes: 1

Related Questions