We Keep Coding

AngularJS: console.log does not display anything

I wrote a controller for login page. Here is my controller:
var authApp = angular.module('loginApp', [])
authApp.controller('LoginCtrl', ['$scope', '$location', 'loginFactory', function($scope, $location, loginFactory){
$scope.authenticate = function() {
loginFactory.login($scope.username, $scope.password)
.then(function(response) {
console.log(response.$statusText);
}, function errorCallBack(response) {
console.log(response.$statusText);
});
}
}]);
My service:
authApp.factory("loginFactory", function ($http) {
return{
login: function(username, password) {
var data = "username="+username+"&password="+password+"&submit=Login";
return $http({
method: 'POST',
url: 'http://localhost:8080/login',
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
});
}
When I debug the code, authentication seems successful and it did get into then function. However nothing displays in console. And I got a warning(?) saying undefined for the line console.log(response.$statusText);. It is not an error since it is not red. Why doesn't it print out anything?

Use response.statusText not response.$statusText. The documentation for AngularJS $http requests lists statusText as one of the properties of the response object - https://docs.angularjs.org/api/ng/service/$http

How can I change the structure of an AngularJS get request?

I have the following states as part of an AngularJS app:
.state('app.stages', {
url: '/stages',
views: {
'menuContent': {
templateUrl: 'templates/stages.html',
controller: 'StagesCtrl'
}
}
})
.state('app.stage', {
url: '/stages/:stageId',
views: {
'menuContent': {
templateUrl: 'templates/stage.html',
controller: 'StageCtrl'
}
}
The controllers associated are:
controller('StagesCtrl', function($scope,$http) {
$http.get("http://localhost/apistages")
.then(function(response) {
$scope.stages = response.data;
});
})
.controller('StageCtrl', function($scope, $http, $stateParams) {
$http({
method: 'GET',
url: 'http://localhost/apistage/',
params: {stageId: $stateParams.stageId}
}).then(function successCallback(response) {
$scope.stage = response.data;
}, function errorCallback(response) {
});
});
The stages list works well, but the query in the stage controller tries to access http://localhost/apistage/?stageId=43 which results in a 500 (Internal Server Error).
The URL format that I need to use is http://localhost/apistage/43 . How can I adjust the query to fetch that URL?

Then don't use params options on $http GET request. Instead just use simple string concatenation on URL while making call to service
$http({
method: 'GET',
url: 'http://localhost/apistage/'+$stateParams.stageId //append state parameter in URL itself
})
For REST API I'd highly recommend you to use ngResource($resource) module of angular. Which has good capability to deal with rest calls.

You should not use two controllers. Use only one controller and use $routeParams to get the url parameter. Here now you check if parameter is present or not and differentiate your logic as required. You can use the following code:
var stageId = $routeParams.stageId;
If(stageId)
Do something
else
Do something different

Angular async http request

I am trying to do a http ququest in angular. Somehow it seems am missing out on something which i cannot figure out what it is?
On Page load i get this error:
Error: [$injector:undef] http://errors.angularjs.org/1.4.5/$injector/undef?p0=%24formServices
My Service:
app.factory('$formServices',['$http','$q',function ($http, $q) {
function postSubmit (fData) {
return $http({
url: 'forms/Form1.php',
method: "POST",
data: { items: JSON.stringify(fData) }
});
}
}
]
);
And the controller that calls the service:
$formServices.postSubmit($scope.Parameters).then(function (response) {
console.log(response);
$scope.Results = response;
});
What am i missing out on?

$injector:undef
Try adding a return to your factory. Also, if you wish to call the function with dot notation you need to place the function inside of an object.
app.factory('$formServices',['$http','$q',function ($http, $q) {
return {
postSubmit: function(fData) {
return $http({
url: 'forms/Form1.php',
method: "POST",
data: { items: JSON.stringify(fData) }
});
}
}
}
]
);

Factory must return object from factory, so that will be exposed via to factory consumer via injecting its dependency.
Code
app.factory('$formServices', ['$http', '$q', function($http, $q) {
function postSubmit(fData) {
return $http({
url: 'forms/Form1.php',
method: "POST",
data: {
items: JSON.stringify(fData)
}
});
}
// should object
return {
postSubmit: postSubmit //link post submit to function
}
}]);

The issue is that your factory does not return an object. To learn more about this I suggest reading https://docs.angularjs.org/guide/providers
Evilzebra's answer would work I believe, but if you ever wanted to have more functionality in your factory, a good way to structure factories is:
app.factory('$formServices',['$http','$q',function ($http, $q) {
var service = {};
service.postSubmit = function (fData) {
return $http({
url: 'forms/Form1.php',
method: "POST",
data: { items: JSON.stringify(fData) }
});
}
return service;
}]);
This would allow you to add more features, appending them to the service object.

Can't get array by $resource

Can't get array by $resource. Can you help me? When I use $http all is well
I have error in console:
TypeError: undefined is not a function
at http://127.0.0.1:9000/bower_components/angular-resource/angular-resource.js:597:29
at forEach (http://127.0.0.1:9000/bower_components/angular/angular.js:327:18)
at angular.module.provider.$get.Resource.(anonymous function).$http.then.value.$resolved (http://127.0.0.1:9000/bower_components/angular-resource/angular-resource.js:595:19)
at deferred.promise.then.wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11616:81)
at http://127.0.0.1:9000/bower_components/angular/angular.js:11702:26
at Scope.$get.Scope.$eval (http://127.0.0.1:9000/bower_components/angular/angular.js:12797:28)
at Scope.$get.Scope.$digest (http://127.0.0.1:9000/bower_components/angular/angular.js:12609:31)
at Scope.$get.Scope.$apply (http://127.0.0.1:9000/bower_components/angular/angular.js:12901:24)
at done (http://127.0.0.1:9000/bower_components/angular/angular.js:8487:45)
at completeRequest (http://127.0.0.1:9000/bower_components/angular/angular.js:8703:7)
I created a factory with method
coeffsResource.factory("CoeffsResources",['$resource',
function($resource) {
return $resource('/api/:action',{}, {
get_all_coeffs: { method:'GET', isArray:false, params: {action: 'getAllRegionCoefficients'} },
save_all_coeffs: { method:'POST', params: {action: 'storeAllRegionCoefficients'} },
get_manufacturer: { method: 'GET', isArray:true, params: {action: 'getAllManufacturers'} },
get_models: { method: 'GET', params: {action: 'getModels'} },
get_classes: {method: 'GET', params: {action: 'getClassesConfig'} },
get_regions: {method: 'GET', params: {action: 'getAllRegions'} },
get_ages_config: {method: 'GET', params: {action: 'getAgesConfig'} },
get_odometer: {method: 'GET', params: {action: 'getOdometersConfig'} },
get_tax_config: {method: 'GET', params: {action: 'getTaxConfig'} }
}, {stripTrailingSlashes: false})
}]);
Include factory in controller
angular.module('etachkaEvaluatorFrontendApp')
.controller('CoeffCtrl', function($scope, $http, $resource, $q, CoeffsResources) {
var coeffsResourcesObject = new CoeffsResources();
coeffsResourcesObject.$get_manufacturer().then(function() {
}, function() {
})
})

I think you need to inject the ngResource dependency.
angular.module('etachkaEvaluatorFrontendApp', ['ngResource'])

Why are you newing up a singleton? AngularJS Factories are not intended to work this way. See the AngularJS service docs for more information
Angular services are:
Lazily instantiated – Angular only instantiates a service when an
application component depends on it.
Singletons – Each component
dependent on a service gets a reference to the single instance
generated by the service factory.
Change your usage in CoeffCtrl to the following... (this also assumes you have correctly loaded the ngResource module at some earlier point in your application)
.controller('CoeffCtrl', function($scope, $http, $resource, $q, CoeffsResources) {
CoeffsResources.$get_manufacturer().then(function() {
}, function() {
})
For a better understanding on factory behavior I have crafted two simple demos. Note that these are not intended to solve your issues in a copy/paste fashion - but to demonstrate what happens when we new an AngularJS factory.
JSFiddle Link - demo - correct
JSFiddle Link - demo - incorrect - TypeError: undefined is not a function

not getting data from $http from service to scope

we are trying to get data from service agrService with $http its working but when i reccive data to controller i am not able to access it outside that function
$scope.resource return data inside function but not outside please help.
var app = angular.module('app', ['ui.router','ngTasty']);
app.config(['$urlRouterProvider', '$stateProvider',function($urlRouterProvider, $stateProvider, $routeProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
controller: function($scope, $http, $location, agrService) {
agrService.bannerSlides().then(function(data) {
//its working here
$scope.resource = data;
}, function(error) {
// do something else
});
I NEED TO ACCCESS DATA HERE CAN ANY BODY HELP
console.log($scope.resource);
}
});
}]);
app.service('agrService', function($q, $http) {this.bannerSlides = function() {
var dataUrl = 'http://WWW.EXP.COM/codeIgniter_ver/main/home';
var ret = $q.defer();
$http({
method: 'GET',
dataType: "json",
url: dataUrl
})
.success(function(data, status, headers, config) {
ret.resolve(data);
}).error(function(data, status, headers, config) {
ret.reject("Niente, Nada, Caput");
});
return ret.promise;
};
});

My suggestion would be to rethink the logic a bit. You want to do something with the data after you receive it, so why not make a function that you call once the data is received?

You'll never be able to access the resource data in that console log, simply because $http is an async call, and no matter if you return a promise or not, it's simply not ready at that point.
However, if you use it in a template or elsewhere that uses angular's double binding, it will work just fine.
To fix your issue, you can define a function with what happens after that service call and simply call it from the success callback:
agrService.bannerSlides().then(function(data) {
//its working here
$scope.resource = data;
myAfterFunction(); // <--- here
}, function(error) {
// do something else
});
and the function can be:
function myAfterFunction() {
console.log($scope.resource);
}
And btw. your service is an example of deferred antipattern, you can simply do this:
app.service('agrService', function($q, $http) {this.bannerSlides = function() {
var dataUrl = 'http://WWW.EXP.COM/codeIgniter_ver/main/home';
return $http({
method: 'GET',
dataType: "json",
url: dataUrl
})
};
});