Spring/Angular: Define request mapping with Angular - javascript

Using Angular for UI and Spring in the backend secured with Spring security. Is it possible to define view page in the angularjs for request-mapping? For snippet below, on successful authentication, the page redirects to "/display" . Then, in the Spring controller I need to add a mapping for "/display" which returns the view "display"(html). Is it possible to include the mapping in the angular instead of spring??
$scope.login = function() {
authenticateUser($scope.credentials, function() {
if ($rootScope.authenticated) {
$location.path("/display");
$scope.error = false;
} else {
$location.path("/");
$scope.error = true;
}
});
};

Related

unable to hit the spring controller when tested in IE11

I have a trouble with IE when ng-click is used in the button.
I want to reload the data from spring controller whenever user click on the button which is working fine in chrome but not in IE11.
Issue is when page is loaded data is displayed on the webpage, when Refresh Data button is clicked, it will reload the data by hitting to the spring controller which is not working in IE. In IE, when user click on a button, it is hitting the angular controller as well as service method also but not hitting the spring controller.But when developer tools is opened it is hitting the spring controller.
Example below:
html code:
<div ng-controller="loadingSampleCtrl">
<button class="btn btn-primary" type="button" ng-click="loadOrRefreshData()">Reload</button>
{{myData.empName}} /* This is printed in chrome as well as in IE with developer tools opened*/
</div>
js code:
myApp.controller('loadingSampleCtrl', function ($scope, MyService) {
$scope.loadData = function () {
$scope.loading = true;
MyService.testData().then(
function (response) {
alert("response back from spring controllerf");
if(window.navigator.msSaveOrOpenBlob){
$scope.IEBrowser = true;
$scope.myData = response;
/* $timeout(function() {
$scope.pdfName = response;
}, 0);*/
} else {
$scope.IEBrowser = false;
$scope.myData = response;
}
},
function (errResponse) {
$rootScope.showError("Internal error" + errResponse);
});
}
$scope.testData();
});
//service call
_myService.testData = function(){
alert("service call");//this alert is visible in IE
var deferred = $q.defer();
var repUrl = myAppURL+'/myDataToRead/getData.form';
$http.get(repUrl).then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
deferred.reject(errResponse);
}
);
return deferred.promise;
}
spring controller:
#RequestMapping(value = "/getData", method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE)
public #ResponseBody
List<String> getMyData(HttpServletRequest request) throws Exception {
System.out.println("In MyDataController"); //not printed in IE when tested without developer tools
//logic here
//return statement
}
Any suggestions would be helpful.
i check you url var repUrl = yAppURL+'/myDataToRead/getData.form';, and i this the issue is you are not map controller with the path. you are only map your method with /getData. you need to use #RequestMapping annotation into your controller. you can refer below code :
#RestController
#RequestMapping("/myDataToRead")

I am updating this in view file by clicking it and want to show in view file without refreshing it

$scope.pause = function(userid){
var id = $scope.userid;
var status = 3;
getClients.status(id,status).then(function(response)
{
console.log('Response',response);
$scope.clients = response.data;
console.log('Data',$scope.clients);
$scope.cancel();
});
};
I am updating this in view file by clicking it and want to show in view file without refreshing it.
Solution,
HTML
<div ng-controller="controllerName" ng-int="getData()">
</div>
JS
app.controller("name",fucntion(){
$scope.getData = function(){
//api call to get data from database
$scope.data = resultData;
}
$scope.yourEditFunction = function(){
//make API call to update data in database
$scope.getData();
}
})
But ideally if you assign your get API result to an $scope variable and later in edit function update it then there is no need to refresh page angular will update the data for you.

Using Angular to authenticate users API

I am building a web application in Angular ( Im new to Angular).
I building a form to pass new user info to the third party software via API end point.
to post data I need to pass name(new user) email(new user) user_key(mine) and api_key (changes evry hour)
To get the new api_key I need to Post
POST: https://pi.pardot.com/api/login/version/3
message body: email=<email>&password=<password>&user_key=<user_key>
and this returns
<rsp stat="ok" version="1.0">
<api_key><api_key here></api_key>
</rsp>
Once I have the new Key I can pass it with the form post to post data.
Question
I think Ill need to have a function that runs before the Posting of data that dose the post to get the new api_keyand changes the api_key variable on my new user post.
so the main question is how do I do this with angular, I have added my current post controller bellow that post the new user data.
My controller
// submit button controller POST
// =============================================================================
FirstModule.controller('formController', function ($scope, $http) {
$scope.formData = {};
$scope.processForm = function (Fname, Lname, email) {
var data = {
Fname: $scope.formData.Fname,
Lname: $scope.formData.Lname,
email: $scope.formData.email,
api_key: 'changes every hr', //needs to be dynamic
user_key: 'my key'
};
//Call the services
$http.post('https://some api.com/api/prospect/version/4/do/create', JSON.stringify(data)).then(function (response) {
if (response.data)
$scope.formData = "Post Data Submitted Successfully!";
}, function (response) {
$scope.formData = "Post Data Submitted Failed";
$scope.statusval = response.status;
$scope.statustext = response.statusText;
$scope.headers = response.headers();
});
};
});
My form
<form name="myForm" id="signup-form" class="col-sm-8 col-sm-offset-2"
ng-submit="processForm()"
ng-click="postdata(formData)">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
So this part is Ok, but how do I run a function before this runs so I get the latest api_key ? and more importantly how can I do it safe ?
The API is Pardot
For security should I place all; API request on a backed script maybe node ?
you can try to use app.run() and write the function in that. app.run() will always run before your controller. Here is one link you can check AngularJS app.run() documentation?

How to redirect to the successs page upon successfull http post request in angular Javascript

I am learning how to use angular javascript alongside my favorite, PHP framework (CodeIgniter). I have a login section that authenticates to a service and gets the response using angular js. The code works fine. See snippet below
var login = angular.module('authenticationApp' , ['ngMaterial' , 'ngRoute']) ;
login.controller('authenticationController', function ($scope, $http) {
$scope.authenticate = function () {
if ($scope.username == undefined || $scope.password == undefined) {
$scope.login_error_message = "All form fields are required" ;
} else {
var url = get_base_url() + 'student/authentication/login?username=' + $scope.username + '&password=' + $scope.password ;
$http.post(url).then(
function (response) {
console.log(response) ;
/*Here I handle success*/
}, function (response) {
$scope.login_error_message = "Service Error!. Response: " + response ;
}
) ;
}
} ;
My problem is how can I send that response to the success.php page and also redirect to the success page. I can redirect using
window.location.href = get_base_url() + 'administrator/authentication/dashboard' ;
My challenge now is actually sending the response to this new location.
Thanks in advance and I am ready to provide more details if need be
After battling for long, I just decided to use plain js. Crappy but works.

Page redirection not working in angularjs using window.location.href

I am coding a page where after the user has entered the data in input fields, the data will be validated with an ajax request. After the data has been validated the page must be redirected to another page.
The below code is not working :
$scope.validateUser = function() {
username = $scope.username;
password = $scope.password;
if ( username === "nrvarun89") {
console.log(username+" "+password+" path is :"+window.location.href);
window.location.href = "http://localhost/b2c-webadmin/index/";
console.log(username+" "+password+" new path is :"+window.location);
}
};
If you are using anuglarjs make use of the $window service (best practice):
https://docs.angularjs.org/api/ng/service/$window
This should work:
$window.location.href
(See this for reference: https://docs.angularjs.org/guide/$location)

Categories