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']);
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 using angular-filter countBy function to group and count the number of entries for a column. I would like to pass the values from this into a separate bar-chart on the same page. I have tried a number of ways but haven't manage to get it to work.
HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> -->
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/release/ui-grid.css"></script>
<script src="node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="node_modules/angular-filter/dist/angular-filter.min.js"></script>
<!-- <script src="/js/app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<!-- <link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css"> -->
</head>
<body>
<div ng-controller="myController">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
<div><canvas id="bar" class="chart chart-bar"chart-data="key" chart-labels="value" chart-series="series"></canvas></div>
<div><li ng-repeat="(key, value) in myData | countBy: 'col_ky'" >Column Key: {{ key }}, Number of Hits: {{ value }}</li></div>
</div>
</body>
</html>
Controller:
var app = angular.module('app',['ngTouch', 'ui.grid', 'chart.js', 'angular.filter']);
app.controller('myController',['$scope', '$http','$filter',function($scope, $http, $filter) {
$scope.barData = [];
$scope.labels = [];
$scope.myData = [{"col_ky":"75421","crt_ts":1501365031000},{"col_ky":"75421","crt_ts":1501124681000},{"col_ky":"75421","crt_ts":1501124688000},{"col_ky":"880610","crt_ts":1501127589000},{"col_ky":"880610","crt_ts":1501127715000},{"col_ky":"891733","crt_ts":1501128075000},{"col_ky":"75421","crt_ts":1501128130000},{"col_ky":"880610","crt_ts":1501128181000},{"col_ky":"75421","crt_ts":1501128192000},{"col_ky":"885110","crt_ts":1501128364000},{"col_ky":"880610","crt_ts":1501128369000},{"col_ky":"326083","crt_ts":1501130957000},{"col_ky":"75421","crt_ts":1501131142000},{"col_ky":"863184","crt_ts":1501131949000}];
}]);
If I could pass the keyand value from ng-repeat into the barData and labels vars in the controller maybe , I could then use barData and labels to populate the bar chart. So how can I do this?
I finally got the code jsfiddle working, its working fine. The code shows how to call the custom filter function. I hope this is what you are looking for. Also one more thing. The line that does the custom filter is as so
$scope.barData = $filter('countBy')($scope.myData, "col_ky");
Jsfiddle: https://jsfiddle.net/Kai_Draord/p3exg6rw/9/
Final Output:
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.
Hi I've been having some problems refactoring my controllers into their own snippets
I want the controllers to inherit the dependencies from my initial app declaration.
"use strict";
angular.module('clockOn', ['angular-contextual-date','logon','milli','mobile','ClockOnController','Auth','ngStorage'])
I need these dependencies to flow through my controllers.
angular.module('clockOn').controller('LogonController', ['$rootScope','$scope','$location','$localStorage','Auth',
function($rootScope, $scope, $location, $localStorage,Auth){
creates unknown provider errors --I'm assuming the dependencies aren't flowing down--
angular.module('clockOn',[]).controller()
creates undefined function 'controllerName' errors -In this scenario I'm assuming I'm redefining the app and hence loosing the other controllers-
Here's two of the controllers
(function (){
angular.module('clockOn',['Auth','angular-contextual-date'])
.controller('ClockOnController', ['$http','Auth','contextualDateService' ,function ($http,Auth,contextualDateService){
this.user = Auth.getTokenClaims().user; //authorised is a property of the controller
contextualDateService.config.fullDateFormats.thisMonth = "MMM d 'at' h:mm a ";
this.shifts = getShifts(this);
function getShifts(clockOnCtrl){
var date = new Date();
var curr_date = Date.now();
var week_from_now = Date.now()+"7";
$http({
method: 'GET',
url: '/shifts',
params: {"user_id":clockOnCtrl.user._id,
"start_at":curr_date,
"finish_at":week_from_now}
}).
then(function(res){
if (typeof res !== 'undefined'){
console.log(res.data);
clockOnCtrl.shifts = res.data;
}},
function(error){
console.log(error)
});
}
}]);
})();
My index file
<!DOCTYPE html>
<html class="container" ng-app="clockOn"> <!-- ng-app tells the html page which app/module it belongs too runs the store module on load-->
<head>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" type="text/css" href="../resources/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../resources/custom.css"/>
</head>
<body>
<script type="text/javascript" src="../resources/jquery.min.js"></script>
<script type="text/javascript" src="../resources/angular.min.js"></script>
<script type="text/javascript" src="../resources/bower_components/angular-contextual-date/dist/angular-contextual-date.js"></script>
<script type="text/javascript" src="../modules/app.js"></script>
<script type="text/javascript" src="../modules/logon.js"></script>
<script type="text/javascript" src="../modules/tasks.js"></script>
<script type="text/javascript" src="../services/milli.js"></script>
<script type="text/javascript" src="../services/auth.js"></script>
<script type="text/javascript" src="../modules/mobile.js"></script>
<script type="text/javascript" src="../modules/shifts.js"></script>
<script type="text/javascript" src="../modules/layout-components.js"></script>
<script type="text/javascript" src="../resources/bower_components/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="../controllers/controller-clockOn.js"></script>
<script type="text/javascript" src="../controllers/controller-logon.js"></script>
<script type="text/javascript" src="../controllers/controller-tasks.js"></script>
<div class="container" ng-controller="ClockOnController as clockOnCtrl">
<div class= "" ng-controller="LogonController as logonCtrl">
<logon-form></logon-form>
<top-menu></top-menu>
<div class="page-header" ng-show="token">
<h2 class="">Welcome {{clockOnCtrl.user.name | uppercase}}
<small>You currently have {{clockOnCtrl.shifts.length}} shifts</small>
<h2>
</div>
<shifts-list></shifts-list>
<custom-footer></custom-footer>
</div>
</div>
</body>
</html>
The error Argument 'ClockOnController' is not a function, got undefined
I'm having trouble getting a simple App example to route. I'm using the backbone-on-rails gem.
Here's my App.js.coffee:
window.App =
Models: {}
Collections: {}
Views: {}
Routers: {}
$(document).ready ->
MyRouter = Backbone.Router.extend(
routes:
'' : 'index'
index: ->
console.log("Inside router")
new App.Views.HomeIndex()
)
router = new MyRouter
Backbone.history.start
console.log(router.routes[Backbone.history.fragment])
The router never reaches the index callback and the View is never rendered.
Here's the HTML Page that is rendered by Rails:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/underscore.js?body=1"></script>
<script src="/assets/backbone.js?body=1"></script>
<script src="/assets/app.js?body=1"></script>
<script src="/assets/homes/index.js?body=1"></script>
<script src="/assets/models/home.js?body=1"></script>
<script src="/assets/collections/homes.js?body=1"></script>
<script src="/assets/views/homes/homes_index.js?body=1"></script>
<script src="/assets/routers/homes_router.js?body=1"></script>
<script src="/assets/routers/homes_routers.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="sA25aKKc/j2EJL6k8J0gm8SxGU2mHRhH8Sb6Sye81Ac=" name="csrf-token" />
</head>
<body>
<div id="app"></div>
</body>
</html>
What do I need to do to properly instantiate a Backbone Router and get it to route to my Views?
Looks like you just need to call Backbone.history.start rather than simply reference it. This just references the function:
Backbone.history.start
This calls it:
Backbone.history.start()
The function-calling parentheses are only optional when you supply some arguments.
Demo: http://jsfiddle.net/ambiguous/hUZUV/