Integrating AngularJS with Play framework - angularjs

I have in my javascript the following AngularJS snippet:
$http({
method: 'POST',
url: '/checklogin'
})
.then(function successCallback(response) {
alert('It worked');
}, function errorCallback(response) {
alert('Error:' + response.status)
});
That points in the routes file to a Play Controller:
POST /checklogin controllers.CheckLogin.index
The problem is that for each different Angular HTTP post I need to create an entry in routes (around 200 entries to create and maintain). Is there a way to avoid that?

You can use dynamic matching in routes and match your route somewhere in your application, but it isn't elegant solution.
GET /*yourRoute AppController.matcher(yourRoute)

Related

Get "initially loaded" (not AJAX call) Response Headers with AngularJS

In looking at How to read response headers in angularjs?, I see answers that involve making an http/ajax request after the page loads then getting the response headers.
I have an angularJS app that needs to render the page (immediately when it loads, not after) using some JSON in a custom response header key that I've added on my python backend.
Is there non-hacky a way to do this? Or is the very attempt at rendering a web page using AngularJS to parse response headers a hack in itself?
My headers look like this (I'm trying to get myjson) :
Keep-Alive:timeout=1, max=100
myjson:{"key2": "value2", "key1": "value1"}
Server:Apache
I think this is what you are aiming for, using $http and ngRoute. Forgive me if I'm misunderstanding. It's just loading data about this question via SO's API. If you click Load Data, you'll see the headers from SO on that page..
var app = angular.module('plunker',['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
template: '<h1>Test 1</h1>',
controller: 'HomeCtrl'
}).
when('/loaddata', {
templateUrl: 'load_data.html',
controller: 'LoadDataCtrl',
resolve: {
stackQuestion: function($http){
// We must return something with a promise. $http already does that, so does $resource.
// See: https://docs.angularjs.org/api/ng/service/$q
return $http({
method: 'GET',
url: 'https://api.stackexchange.com/2.2/questions/37491743?order=desc&sort=activity&site=stackoverflow'
})
}
}
}).
otherwise({
redirectTo: '/home'
})
}
]);
Then, in your controller:
app.controller('LoadDataCtrl',function(stackQuestion,$scope){
// now our data is here
$scope.question = stackQuestion.data;
$scope.headers = stackQuestion.headers();
});
http://plnkr.co/edit/ylOfSNqPAqjdg9rYxsbb?p=preview

Pass Data List from angularjs to webservice?

I'm working on app in ionic 1 platform using angularjs, in which I want to Pass List of object to Web-service, How can I do it?
I have tried doing this but was not able to send any Data..
Here is my code and how to pass list of object in data: $scope.AddNew
$http({ url: $rootScope.HostName + '/bulk', dataType: 'json', method: 'POST', contentType: "application/json; charset=utf-8", data: $scope.AddNew, headers: { 'content-type': 'application/json' } }).success(function (response) { alert("Success"); }).error(function (error) { });
If there is another approach or way to do it then please do help
Thanks in advance.
Assuming your $http call is in the controller where you can access $scope.
The way you had passed is correct, but at the server side you should accept your request body as an Array of objects.
If your server side is java spring app,
You would design your method with #RequestBody YourClass[] objs
I think your code is correct, just so it is simple and readable I would suggest this format:
$http.post($rootScope + '/bulk', $scope.AddNew).then(function(response) {
alert("Success");
}, function(error) {
})
The promise structure in AngularJS has since been updated. In regard to your question, the code should work fine if you can access AddNew through your $scope. Make sure you are handling your requests properly in the backend. Try logging for checking if data is sent and received.

Enable hashbang in $http URL in AngularUS

I am trying to access an URL in AngularJS as
$http.get("http://localhost:8080/#/notebook/2CG2BVYJ1")
.then(function(response){ vm.getgraph = response.data; });
For this, the get request sent is only http://localhost:8080/. I think $http.get is ignoring anything after '#' in the URL. How to make it access the full URL?
If this is is from the same app I will suggest you can use get in more direct way like so
$http({
method: 'GET',
url: '/notebook/2CG2BVYJ1'
}).then(function(response){ vm.getgraph = response.data; });
I hope this help

Angular: $http change method on adding data with post

I am using fuse template and accessing my web service by using $http, its working fine if i am using method: 'POST' without send any data but whenever i am adding some data with post like: data: {text:'test'} and send request to my web service its change the method type POST to OPTIONS.
My Code:
$scope.submit = function(){
$http({
method: 'POST',
url: 'http://www.example.com/api-link',
data: {test: 'hello'},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(result){
console.log(result);
});
}
When i am checking in browser network its showing method type OPTIONS. Can anyone please tell what is wrong in my code?
Thanks

add config in angular resource

I am using http-auth-interceptor for authentication. In http-auth-interceptor, I use the following way to login:
var data = 'username=' + encodeURIComponent(user.userId) + '&password=' + encodeURIComponent(user.password);
$http.post('api/authenticate', data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
ignoreAuthModule: 'ignoreAuthModule'
})
ignoreAuthModule is used to tell ignoreAuthModule that this login method will be ignored by the auth interceptor.
Now, I have some request with $resource, like:
.factory('SomeDataService', function ($resource) {
return $resource('api/some/data', {}, {
'get': { method: 'GET'}
});
})
I want SomeDataService.get() is also ignored by the auth interceptors, because I need to control the 401 error by myself.
So, my question is, is there any way for ngResource that I can set config like that in $http.
[update based on comment]
I have listened the login-required event:
$rootScope.$on('event:auth-loginRequired', function (rejection) {
$log.log(rejection);
// I need to get the request url and for some specific url, need to do something.
$rootScope.loginPopup();
});
But the 'rejection' parameter has no context data of request I need. I need to get the request url and check, for some specified url, I need to do something.
After checking the document of ngResource, I got the solution as below:
.factory('SomeDataService', function ($resource) {
return $resource('api/some/data', {}, {
'get': { method: 'GET', ignoreAuthModule: 'ignoreAuthModule'}
});
})
Just add the config item as above. It will be equivalent ad:
$http.post('api/some/data', data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
ignoreAuthModule: 'ignoreAuthModule'
})
ngResource module is build on top of $http.Hence it is not possible to configure all the stuffs you can do with $http in $resource.I think the below link will be guide you to have a clear understanding on $http and $resource

Resources