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">Visualization<span class="sr-only">(current)</span></li>
<li>Data</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
First, this is unrelated to your issue, but there are several things that should be cleaned up here.
Eliminate the use of success in your call to $http.post and replace it with then. Success is depracated.
It looks like this should be a call to $http.get, not post.
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.
Related
I added a paralla code to my page, but the images don't appear, when I remove the class "parallax" from container of the image, images appear but without the parallax effect,
<div class="parallax-container">
<div class="parallax"><img src="content/img/wood.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="content/img/wood.jpg"></div>
</div>
<script type="text/javascript">
var elem = document.querySelector('.parallax');
var instance = M.Parallax.init(elem, options);
// Or with jQuery
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
and these are the libraries I added
<script src="app\lib\angular.min.js"></script>
<script src="app\lib\angular-route.min.js"></script>
<script src="app\lib\angular-aria.min.js"></script>
<script src="app\lib\angular-messages.min.js"></script>
<script src="app\lib\angular-animate.min.js"></script>
<link rel="stylesheet" href="app\lib\angular-material.min.css">
<script src="app\lib\angular-material.min.js"></script>
<link rel="stylesheet" href="content/css/styles.css">
<!--Materialize-->
<link href="materialize\css\icon.css" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.min.css">
<link rel="stylesheet" href="app\lib\Roboto.css">
<script src="app\app.js"></script>
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js"></script>
<script src="materialize\js\materialize.min.js"></script>
Your error lies in trying to init the function twice in your Javascript code. Also (well at least on my end), I do occasionally receive errors using vanilla JS while intializing components for materialize. What you could do: (remove the vanilla JS code and add this to the end of your file, preferably below the end of body tag)
<script>
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
Make sure you call the jquery before the materialize script like so:
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js">
</script>
<script src="materialize\js\materialize.min.js"></script>
I am writing an AngularJS app that contains a $scope array which I populate a ul with. Each li contains an "x" which when clicked calls a function in my Chatroom controller and removes the item from the $scope array.
What should happen is that the item is removed from the array and hence also from the view. But if I step through the debugger I can visually see the li being removed from the DOM, but afterwards my entire ng-view gets removed.
Images here:
Before clicking "x"
After clicking "x"
I can't seem to figure out why it's doing this. I shall post code below.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="chatasticExtension" ng-controller="MainCtrl">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- load bootstrap css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<div>
<div ng-view></div>
</div>
</body>
<script src="js/vendors/bower_components/angular/angular.js"></script>
<script src="js/vendors/bower_components/angular-animate/angular- animate.js"></script>
<script src="js/vendors/bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="js/vendors/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="js/vendors/bower_components/angular-socket-io/socket.min.js"></script>
<script src="js/vendors/bower_components/angular-route/angular-route.min.js"></script>
<script src="js/vendors/bower_components/socket-io-client/socket.io.js"></script>
<script src="js/vendors/bower_components/angular-socket-io/socket.min.js"></script>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/constants/configs.js"></script>
<script src="js/services/socket-factory.js"></script>
<script src="js/services/authentication.js"></script>
<script src="js/services/chrome-tabs-manager.js"></script>
<script src="js/controllers/main.js"></script>
<script src="js/controllers/chatroom.js"></script>
<script src="js/controllers/tabs.js"></script>
<script src="js/directives/header.js"></script>
<script src="js/directives/rooms-lists-tabs.js"></script>
<script src="js/directives/chat-window.js"></script>
<script src="js/directives/ng-enter.js"></script>
</html>
main.html (This is what is displayed in ng-view and what disappears)
<div class="container main-container" ng-controller="ChatroomCtrl" >
<div class="col-xs-4">
<rooms-lists-tabs></rooms-lists-tabs>
</div>
<div class="col-xs-8">
<chat-window ng-hide="!activeConversation"></chat-window>
</div>
</div>
rooms-lists-tabs.html (Note the ng-click="leaveRoom($index) on the second ng-repeat for convo in conversations)
<uib-tabset active="active">
<uib-tab index="0" heading="{{tabs[0].name}}">
<div class="scrollable-container list-group">
{{ room.title }}
</div>
</uib-tab>
<uib-tab index="1" heading="{{tabs[1].name}}">
<div class="scrollable-container list-group">
<a id="a-{{urlToId(convo.url)}}" href="" class="list-group-item" ng-repeat="convo in conversations" ng-click="switchConversation(convo.url)">
{{ convo.title }}
<span class="pull-right glyphicon glyphicon-remove" ng-click="leaveRoom($index)"></span>
</a>
</div>
</uib-tab>
Chatroom Controller (leaveRoom function only)
$scope.leaveRoom = function(index) {
var conversation = $scope.conversations[index];
socket.emit("leaveRoom", {
user: $scope.user,
room: conversation.url
});
$scope.conversations.splice(index, 1);
}
/**
* Sets the activeConversation to a conversation in the conversations array that matches the passed in url.
* #param url
*/
$scope.switchConversation = function(url) {
if($scope.activeConversation && $scope.activeConversation.url === url) {
return;
}
var conversation = null;
for(var i = 0; i < $scope.conversations.length; i++) {
if($scope.conversations[i].url === url) {
conversation = $scope.conversations[i];
break;
}
}
if(conversation) {
$scope.activeConversation = conversation;
}
else {
// If the conversation was not found, add the conversation and try to switch again
addNewConversation(url);
$scope.switchConversation(url); // Possible infinite loop here if addNewConversation fails somehow.
}
};
Please let me know if you wish to see other pieces of code.
Thanks
UPDATE: As per Gary's suggestion, I tried using pop(). pop() works until I pop the very last item in the list at which point the entire ng-view will disappear again.
UPDATE 2: If I switch to the first tab right after I splice, I never get the error.
UPDATE 3: Added switchConversation function
I had the same issue and I solved it by the following way which I will explain in your case.
Add $event to your ng-click function i.e., ng-click="leaveRoom($event,$index)"
and now your leave room function should be like below
$scope.leaveRoom = function(event,index) {
var conversation = $scope.conversations[index];
socket.emit("leaveRoom", {
user: $scope.user,
room: conversation.url
});
event.preventDefault();
event.stopPropagation();
$scope.conversations.splice(index, 1);
};
This will only remove whatever index you selected
I'm following this tutorial.
But seems like jquery or angular or boostrap.min.js does not load properly. The file location is correct but still it shows me
Uncaught SyntaxError: Unexpected token <
for all the js files I've included in main.html
Here's my main.html
<html ng-app='ContactsApp'>
<head>
<title> My first Angular Project </title>
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/boostrap.min.css">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1> Contacts: {{message}}</h1>
</div>
</div>
<script src = 'app/bower_components/jquery/jquery.min.js'></script>
<script src = 'app/bower_components/bootstrap/js/boostrap.min.js'></script>
<script src = 'app/bower_components/angular/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
Here's my app.js
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootscope.message = "Hello Angular..";
});
Here's my server.js
var express = require('express'),
app = express();
//app object is express application
app
.use(express.static('./public'))
.get('*',function(req,res){
res.sendfile('public/main.html');
})
.listen(3000);
Do you have jQuery, bootstrap, angular files in proper folder as linked in your project? Let us assume you don't and let's try that by linking those files online. Then your main.html would look like:
<html ng-app="ContactsApp">
<head>
<title> My first Angular Project </title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css.map">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1 ng-cloak> Contacts: {{message}}</h1>
</div>
</div>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
And your app.js would look like:
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootScope.message = "Hello Angular..";
});
The problem with you current app.js is that the 'S' of $rootScope.message is not capitalised.
I hope this helps.
I would double check your paths for the scripts. Based on your express routes, if the js file can't be found it will respond with public/main.html. Then the browser would try to load that as a script, which would give the syntax error about <
I am trying to make a PhoneGap webapp using angular. I have these three files.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li>Home</li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
It works fine on the browser. The Alert is triggered just fine in the controller. But when I compiled it on Phonegap, the AngularJS is not initialized.
I've read that you need to execute the code after the 'deviceready' in order to work. I looked into this quetions here:
Angular ng-view/routing not working in PhoneGap
and try to use it. But it appears that it doesn't do anything. I can't understand why, or I might be missing something to do this, as well as my ng-app has a specific name and is attached to the app variable as seen.
Kindly help.
You should not use ng-app when manually bootstrapping Angular. See https://docs.angularjs.org/guide/bootstrap.
I'm trying to build up a REST client written in AngularJS that uses $resources for consuming the REST service and ng-grid library for the User Interface.
By using just the $resource module dependency my code works, however if I introduce also the ngGrid dependency it just displays an empty div.
I've little experience with modules but the syntax seems correct....
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script type="text/javascript" src="angular-resource.js"></script>
<script language="javascript">
angular.module('myApp',['ngResource'], ['ngGrid']);
function Ctrl($scope,$resource) {
var restservice = $resource(
'http://host/myapp/json', {
}, {
query: { method: 'GET', isArray: true }
}
);
$scope.gridOptions = restservice.query();
};
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="Ctrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
Do you see any error in the above code ?
Thanks!
You don't need to pass in a separate array for each module, nest them under one array like this.
angular.module('myApp',['ngResource', 'ngGrid']);