I am new in AngularJS.
I download AngularJS theme from URL here
I have to get Data from GET Service.
GET Service URL is given below
http://localhost:8080/api/getHostStatus
that is running correctly.
So I have to use this URL and get data from that service for this I just change the code in my VisitorsController.js
VisitorsController.js file code is given below
(function () {
angular
.module('app')
.controller('VisitorsController', [
VisitorsController
]);
function VisitorsController() {
var vm = this;
// TODO: move data to the service
var servicesUrl = app.serviceCallUrl+'getHostStatus';
console.log(servicesUrl);
var myService = angular.module("app").factory("myService", ['$http', function($http) {
return {
getResponders: (function(response) {
return $http.get(servicesUrl).then(function(response) {
console.log(response.data);
return response.data;
});
})()
};
return myService;
}]);
vm.visitorsChartData = [ {key: 'UP', y: 5264}, { key: 'Critical', y: 3872},{key: 'Warning', y: 1000} ];
vm.chartOptions = {
chart: {
type: 'pieChart',
height: 210,
donut: true,
x: function (d) { return d.key; },
y: function (d) { return d.y; },
valueFormat: (d3.format(".0f")),
color: ['rgb(0, 150, 136)', '#E75753','#fbbc05'],
showLabels: false,
showLegend: false,
title: 'Over 9K',
margin: { top: -10 }
}
};
}
})();
When I run this it is showing me correct servicesUrl on console.
But response.data not showing on console.
So please guide me how can I resolve it.
Please give me wher im doing Worng
<div ng-app="customCharts">
<div ng-controller="HelloHell">
</div>
</div>
Angular
var app = angular.module('customCharts', []);
var app = angular.module('customCharts', ['dx']);
app.controller("ChartController", function ($scope, $http, $q) {
$scope.productSettings = {
dataSource: new DevExpress.data.DataSource({
load: function () {
var def = $.Deferred();
$http({
method: 'GET',
url: 'http://localhost:53640/Home/PostChart'
}).success(function (data) {
def.resolve(data);
});
return def.promise();
}
}),
series: {
title: 'Displays Product Costs for items in our Database',
argumentType: String,
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount'
}
}
})
Json Controller
public JsonResult PostChart()
{
var prod = new List();
using (Ctxdb db = new Ctxdb())
{
var product = db.Products.ToList();
foreach (var p in product)
{
var thing = new { Name = p.ProductName, Cost = p.Price };
prod.Add(thing);
}
}
return Json(prod, JsonRequestBehavior.AllowGet);
}
Your controller in HTML should be
<div ng-controller="ChartController">
also you should have one module
var app = angular.module('customCharts', []);
vm.getAllLeave = function () {
leavetypeservice.getAllLeave()
.success(function (leaveTypeView) {
debugger;
vm.gridOptions.data = leaveTypeView;
//vm.leaveTypeView = leaveTypeView;
})
};
vm.gridOptions = {
columnDefs: [
{ field: 'name', name: 'Name' }, { field: 'applicableForName', name: 'Applicable For' }]
};
vm.getAllLeave();
}
leavetypecontroller.$inject = ["leavetypeservice", "$location", "$http"];
angular.module('myapp').controller('leavetypecontroller', leavetypecontroller)
leaveTypeView is the response. To get the data (assuming JSON) you need vm.gridOptions.data = leaveTypeView.data
The error you're getting is UI grid attempting to parse a non JSON element.
I am using Backbone-Relational, and I recieve the following error:
Uncaught TypeError: Cannot read property 'idAttribute' of undefined
When I access the show_note route.
App.Router = Backbone.Router.extend({
routes: {
'note/:_id': 'show_note'
},
show_note: function(_id) {
console.log('this is the show_note route for _id: ' + _id);
var note = new App.Models.Note.findOrCreate({ _id: _id });
var note_view = new App.Views.main_note({ model: note });
note.fetch();
}
});
The console.log recieves the '_id'. But when I attempt to instantiate var note, I recieve the error. How do I fix this?
EDIT 1
Adding the Note model:
App.Models.Note = Backbone.RelationalModel.extend({
urlRoot: '/notes',
idAttribute: '_id',
relations: [{
type: Backbone.HasMany,
key: 'tags',
relatedModel: 'App.Models.Tag',
reverseRelation: {
key: 'note',
includeInJSON: '_id'
}
}]
});
EDIT 2
Stacktrace added
I solved the issue by removing findOrCreate(), and ended up retrieving the model data like so:
App.Router = Backbone.Router.extend({
routes: {
'note/:_id': 'show_note'
},
show_note: function(_id) {
var note = new App.Models.Note({ _id: _id });
note.fetch({
success: function(data) {
var mainNoteView = new App.Views.main_note({ model: note });
$('#mainNote').append( mainNoteView.render().el );
},
error: function(err) {
console.log(err);
}
});
}
});
MenuView.js
events: {
"click ul li": "MenuClick"
},
MenuClick: function (e) {
var elm = e.currentTarget;
return elm.firstChild.innerText;
},
ModuleView.js
ModuleView = Backbone.View.extend({
initialize: function () {
var moduleDt = new ModuleCol();
moduleDt.fetch({
data: JSON.stringify({ Code: "Pass to here" }),
dataType: "json",
type: 'POST',
contentType: "application/json; charset=UTF-8"
});
},
The code should work like, when clicking the ul li, I will get the value from the li and pass to the moduleView.js to proceed with backbone fetch, but I dont have any idea on how actually to make it, I had search through quite some link, but still can't figure out the correct, are it is correct to make it?
Update1:
View/MenuView.js
define(['underscore', 'backbone', '../Collection/MenuCol'], function (_, Backbone, MenuCol) {
var MenuView = Backbone.View.extend({
initialize: function () {
//var vent = _.extend({}, Backbone.Events);
var mnCol = new MenuCol();
mnCol.fetch({
type: 'POST',
contentType: "application/json; charset=UTF-8",
success: _.bind(this.AppendMenu, this),
});
},
AppendMenu: function (msg) {
var feed = JSON.parse(JSON.stringify(msg));
//var title = _.pluck(_.flatten(feed[0]), "Title");
_.each(_.flatten(feed[0]), function (data) {
this.$('ul').append('<li class="inactive"><p class="none">' + data.Code + '</p><a>' + data.Title + ' </a></li>');
});
},
events: {
"click ul li": "MenuClick"
},
MenuClick: function (e) {
var elm = e.currentTarget
console.log(elm.firstChild.innerText);
this.trigger('itemChoose', elm.firstChild.innerText);
},
});
return MenuView;
});
View/ModuleView.js
define(['underscore', 'backbone', 'datatables', '../Collection/ModuleCol', '../View/MenuView'], function (_, Backbone, dataTable, ModuleCol, MenuView) {
var ModuleView = Backbone.View.extend({
initialize: function () {
//MenuView.vent.on('itmChoose');
MenuView.on('itemChoose', function (item_value) { });
var mdCol = new ModuleCol();
mdCol.fetch({
data: JSON.stringify({ Code: "" }),
type: 'POST',
contentType: "application/json; charset=UTF-8",
success: _.bind(this.AppendModule, this),
});
},
AppendModule: function (msg) {
var feed = JSON.parse(JSON.stringify(msg));
$('table[id$=gvMenu]').dataTable({
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "10%" },
{ "sWidth": "90%" },
],
"bFilter": false,
"bInfo": false,
"bLengthChange": false,
"bSort": false,
"bPaginate": false,
"aLengthMenu": [
[25, 50, 100, 200, -1],
[25, 50, 100, 200, "All"]
],
"iDisplayLength": -1,
"aoColumns": [
{
"sTitle": "Code", "mDataProp": "Title",
},
{
"sTitle": "Description", "mDataProp": "Description",
}],
sAjaxSource: "",
sAjaxDataProp: "",
fnServerData: function (sSource, aoData, fnCallback) {
//console.log(feed.d);
//fnCallback(feed.d);
},
});
}
});
//MenuView.on('itmChoose', function (item_value) { });
return ModuleView;
});
master.js
require(['jquery', '../JScripts/View/MenuView', '../JScripts/View/ModuleView'], function ($, menu, module) {
$(document).ready(function () {
new menu({ el: $('#sidebar') });
new module({});
});
});
This is my code, but still, it is correct to code like this? I had spent a night to work it out, but it still say is undefined.
When li click, I get the value of the li, and pass to module.js to ajax data so that I can create datatable.
I continue to puzzle it out and see if I can make it today while waiting for your guide :) thanks
According your updates, you must supply instance of MenuView to ModuleView instance:
master.js:
require(['jquery', '../JScripts/View/MenuView', '../JScripts/View/ModuleView'], function ($, menu, module) {
$(document).ready(function () {
var menuInstance = new menu({ el: $('#sidebar') });
new module({menu: menuInstance});
});
});
ModuleView.js:
var ModuleView = Backbone.View.extend({
initialize: function (options) {
//MenuView.vent.on('itmChoose');
options.menu.on('itemChoose', function (item_value) { });
var mdCol = new ModuleCol();
mdCol.fetch({
data: JSON.stringify({ Code: "" }),
type: 'POST',
contentType: "application/json; charset=UTF-8",
success: _.bind(this.AppendModule, this),
});
},
If your ModuleView and MenuView are equal components of system - pick out in your code some central component (e.g. descendant Backbone.Router) and make communication through it.
If your views aren`t equal components (e.g. ModuleView aggregates MenuView), you can subscribe on some event from MenuView in ModuleView and pass value:
//in ModuleView
menuView.on('itemChoosen', function(item_value) { .... });
//in MenuView
MenuClick: function (e) {
var elm = e.currentTarget;
this.trigger('itemChoosen', elm.firstChild.innerText);
},