I'm following a Tuts+ tutorial on building an AngularJS webapp. Everything went well untill I tried getting JSON data on the screen.
I keep getting the following Error: [$resource:badcfg]
Here's my code:
Service
angular.module('ContactsApp')
.factory('Contact', function ($resource) {
return $resource('/api/contact/:id', { id: '#id' }, {
'update': { method: 'PUT' }
});
})
Controller
angular.module('ContactsApp')
.controller('ListController', function($scope, Contact) {
$scope.contacts = Contact.query();
$scope.fields = [ 'firstName', 'lastName'];
$scope.sort = function(field){
$scope.sort.field = field;
$scope.sort.order = !$scope.sort.order;
};
$scope.sort.field = 'firstName';
$scope.sort.order = false;
});
I have allready searched the web for solutions and tried adding isArray:false to the declaration. I also compared all my code to the full code on GitHub, but I can't find the problem.
Did you try to pass an empty array when defining your module, like this :
angular.module('ContactsApp', [])
Related
I am new to Angularjs and learning now .I have a controller as
EventlistController.js
eventsApp.controller('EventListController',function EventListController($scope,$location,$eventData){
$scope.events=eventData.getAllEvents();
});
my app.js is as follows
`
var eventsApp = angular.module('eventsApp', ['ngSanitize','ngResource','ngRoute']).config(
function($routeProvider){
$routeProvider.when('/events',{
templateUrl:'templates/EventList.html',
controller:'EventListController'
});
});
And EventData Service is as follows
eventsApp.factory('eventData', function ($resource) {
return {
getEvent: function () {
var resource = $resource('http://localhost:8001/api/event/:id', { id: '#id' });
return resource.get({ id: 1 });
},
save: function (event) {
var resource = $resource.get('http://localhost:8001/api/event/getNextEventId');
event.id = resource.get();
console.log(event.id);
return resource.save();
},
getAllEvents: function() {
var resource = $resource('http://localhost:8001/api/event');
return resource.query();
}
}
});
when I hit the route http://localhost:8000/#/events I get [$injector:unpr] error. I've gone through the documentation for this one. not sure whats the error was. Any pointers on what am I missing here?
You have created eventData and you are using $eventData.
Try using eventData only. you were injecting incorrect service.
And you may skip writing this name 'EventListController' .
eventsApp.controller('EventListController',function($scope,$location,eventData){
$scope.events=eventData.getAllEvents();
});
I am trying to implement ngTable to display json from rest call. In my factory js, I defined the method for the http get request to obtain all records in this case.
ristoreApp.factory("fmFactory", ['$http', '$window',
function ($http, $window) {
var service = {};
service.getAll = function () {
var url = SERVER + "/ristore/foundation/";
return $http({
headers: {'Authorization': 'Bearer ' + $window.localStorage.getItem("access_token")},
url: url,
method: 'GET',
crossOrigin: true
})
}
return service;
}]);
ngTable is set up in my controller js
ristoreApp.controller("fmCtrl",
['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
$scope.selection = '0';
$scope.reports = [];
$scope.fmSearch = function () {
if ($scope.selection == '0') {
fmFactory.getAll().success(function (data) {
$scope.reports = data;
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.reports.length, // length of data
getData: function ($defer, params) {
$defer.resolve($scope.reports.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
})
}
}
}]
)
Nothing fancy, just simple pagination with 10 records per page. However, I got error TypeError: Cannot read property 'page' of undefined for the method params.page() in $defer.resolve(). This is very strange. Apparently 'page' is defined in the parameter section of NgTableParams. Why does it complain it is not defined?
EDIT:
Based on the link from Sergii's answer I removed the $defer and changed my controller js to the following:
ristoreApp.controller("fmCtrl",
['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
$scope.selection = '0';
$scope.reports = [];
$scope.fmSearch = function () {
if ($scope.selection == '0') {
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
getData: function (params) {
return fmFactory.getAll().then(function(data) {
params.total(data.inlineCount);
return data;
});
}
});
}
}
}]
)
And yet nothing displayed but a bunch of lines. The http call url has been tested and returns correct promise using rest api tester.
As I wrote in comment params is undefined, but exception was wrapped\processed by angular that is reason of partly correct exception information.
I believe this problem appears because of you are using newest ng-table-1.0.0 library for now. If you navigate to Angular ngTableDynamic example:server-side list or Angular ngTable example:server-side list please pay attantion that API to load data was changed.
getData: function(params) {
// ajax request to api
return yourFactory.get(params.url()).$promise.then(function(data) {
params.total(data.inlineCount);
return data.results;
});
}
In your parameter $defer also different object (object is params). If you'll try apply provided solution, please make sure that you changed correctly parameters:
params.url() - should be pagination filter like {page: 0, size: 10}
data.inlineCount - total elements on server side
data.results - data list from server side
I hope my investigation helped not only me to fix this problem.
First i want to say that i'm fairly new to AngularJS, so it might be that i'm asking my question with some oddnes.
I'm trying to pass a string to a factory which in return gives me a result from my database. When i hardcode the values, everything works. But when i try to pass inn values from my view/controller things stop working.
Here is my factory:
healthServices.factory('Entry',
function ($resource) {
return $resource('http://localhost:60673/api/hierarchy/:id', { id: '#id'}, {
query: { method: 'GET', isArray: true }
});
});
Here is the controller im using:
$scope.changeData = function (type) {
$scope.entry = new Entry();
$scope.id = type;
$scope.healthData = $scope.entry.$query({ id: $scope.id });
}
And this is how it looks in my html:
<button ng-click="changeData('someValue')">
At the moment i keep getting
TypeError: value.push is not a function
As i mentioned im quite new to this, so I might be far off. Any help would be very much appreciated.
What is intended by this line of code?
$scope.entry = new Entry();
Entry is your service you want to call.
You should pass this into your controller via dependency injection.
Angular does the 'new' for you.
myApp.controller('myCntrl', HomeCtrl);
HomeCtrl.$inject = ['$scope', 'Entry'];
function HomeCtrl($scope, Entry) {
...
}
I am not seeing any wrong with your $resource configuration.
var myApp = angular.module('myApp',['ngResource']);
myApp.factory('Entry', function ($resource) {
return $resource('http://localhost:60673/api/hierarchy/:id', { id: '#id'}, {
query: { method: 'GET', isArray: true }
});
});
myApp.controller('myCtrl', ['$scope', 'Entry', function($scope, Entry){
$scope.changeData = function (type) {
$scope.entry = new Entry();
$scope.id = type;
$scope.healthData = $scope.entry.$query({ id: $scope.id });
}
}]);
i am getting below in console
GET http://localhost:60673/api/hierarchy/someValue
error lies on other part of the code, please post your controller completely.
Trying to pull in some data using angular and an API. Obviously I'm quite new to this.
My custom service:
readIp.service('ip', ['$resource', function($resource){
this.getIP = function(ip) {
var ipData = $resource("http://www.telize.com/jsonip?callback=getip", {
callback : "JSON_CALLBACK"
}, {
get : {
method: "JSONP"
}
});
return ipData.get({ getip: ip });
}
}]);
From my controller:
$scope.getIP = ip.getIP($scope.getip);
HTML:
<strong>Your IP is:</strong> {{ getIP.ip }}
I'm getting an error currently:
Uncaught ReferenceError: getip is not defined
as the API shows up as: getip({"ip":"###.###.##.##"}); from the source.
Your service isn't properly defined. It should return an object that contains your getIp method. try something along the lines of :
readIp.factory('ip', ['$resource', function($resource){
return {
getIP: function(ip) {
// your code goes here
}
}
}]);
try this in place of above code. Hope you have already added ngResource module.
readIp.factory('ip',['$resource',function($resource){
return $resource('http://www.telize.com/jsonip?callback=getip', {}, {
query: {method:'GET', params:{}}
});
}])
I found many similar questions but I couldn't apply the solutions to my problem.
So in my angular app I am drawing nvd3 charts.
I am doing a get request in the service and I can see from the network in my browser that I am ALWAYS getting the chart data as I am supposed to.
The problem is that, when I am running grunt serve to start my angular app, I am still getting the data through the api, but for some reason they are not shown.
That just happens only when I run grunt serve. However, if I hit refresh, after running grunt serve, the data are shown correctly.
Thanks in advance for any help.
this is what I am trying to do:
'use strict';
angular.module('myApp')
.service('mainService', function($http) {
this.getData = function() {
return $http({
method: 'GET',
url: '/rest/api/config',
});
}
})
.controller('MainCtrl', function($scope, $http, mainService) {
var name = 'main';
var model;
mainService.getData().then(function(d) {
model = d.data;
$scope.modelling();
});
$scope.modelling = function() {
if(!model) {
console.log("no model");
// set default model for demo purposes
model = {
title: "about",
structure: "12/4-4-4",
};
}
console.log(model);
$scope.name = name;
$scope.model = model;
$scope.collapsible = true;
}
});
Try something like this. Initially, in your example, $scope.model is going to be undefined.
.controller('MainCtrl', function($scope, $http, mainService) {
var name = 'main';
mainService.getData().then(function(d) {
$scope.modelling(d.data);
});
$scope.modelling = function(data) {
//do something with data here, or set
$scope.model = data;
}
$scope.name = name;
$scope.collapsible = true;
}
});
That might work, depends on how you set up the nvd3 charts.