AngularJS redirect to view after data save
15,903
I figured it out. It appears in order to use $location.path, you have to add $locationProvider to your app module config:
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'Partials/ViewStart.html'
})
Then, in your controller you inject $location:
app.controller('EmployeeController', function ($scope, employeeFactory, $location)
Finally, you can set the path:
$scope.insertEmployee = function (employee) {
if (employee && $scope.IsNew) {
employeeFactory.insertEmployee(employee)
.success(function () {
$scope.status = 'The item was saved!';
$location.path('/employee-details/' + employee.EmployeeNumber);
})
.error(function (error) {
$scope.status = 'Unable to save the employee data: ' + error;
});
}
else {
$scope.status = 'You are missing required information!';
}
};
Now, when I am on the edit page and click save, it redirects to the details view for that specific employee
Author by
steveareeno
Updated on August 24, 2022Comments
-
steveareeno over 1 year
After saving data from the employee-maintenance view, I am trying to redirect to the employee-details view. I want to do this within the controller's success method:
$scope.insertEmployee = function (employee) { if (employee && $scope.IsNew) { employeeFactory.insertEmployee(employee) .success(function (data) { // after a successful save, redirect the user to the details view $location.path('/employee-details/' + employee.EmployeeNumber); if (!$scope.$$phase) $scope.$apply() }) .error(function (error) { $scope.status = 'Unable to save the employee data: ' + error; }); } else { $scope.status = 'You are missing required information!'; } };
Here is my factory:
factory.insertEmployee = function (employee) { url = baseAddress + "employee/insert/"; return $http.post(url, employee); };
My asp.net webapi controller:
[Route("api/employee/insert/")] public HttpResponseMessage Post(Employee employee) { HttpResponseMessage response = null; // check for the employee Employee employeeCheck = employeeService.GetEmployeeById(employee.EmployeeNumber); if (employeeCheck == null) { if (ModelState.IsValid) { employeeService.CreateEmployee(employee); response = Request.CreateResponse(HttpStatusCode.OK); } else { response = Request.CreateResponse(HttpStatusCode.BadRequest, "There was a problem with saving the data."); } } else { response = Request.CreateResponse(HttpStatusCode.Conflict, "The item already exists"); } return response; }
This question appears to have been asked quite often but none of the solutions have worked for me.
Edit: I used the following instead of $location.path()
window.location.href = 'Index.html#/employee-details/' + employee.EmployeeNumber;
which worked, but it also generate an ugly runtime error:
JavaScript runtime error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!