AngularJS UI-Router / $stateParams - Get data based on object ID

Question

I have an app that directs to a custom url based on a given employeeId parameter when a particular employee is clicked on in a list. When the employee is clicked on, you are taken to an employee details page with their id property as a parameter, and I can display this property in the dom.

What I'm trying to do is to display this employee object's other properties in this different state, which I've had a look around at trying to do, but can't find a solution that matches what I'm trying to do.

Example:

Clicking on employee number 21101994 on employees/employeesList state directs to employees/employeeDetails/?21101994 page and displays only their data in the js fields such as {{employee.firstName}}.

I can successfully show the id, but I want to be able to show ALL of the data for the object that matches the employee's id.

The url routing is working fine, and clicking on this employee on the list page directs correctly to a details page with their parameter, but I can't seem to successfully pass their data into the new state/controller.

-

HTML link:

<li class="collection-item col-xs-12" data-ng-repeat="employee in employees | orderBy: sortByAllDepartments | filter:searchAllDepartments">
    <a ui-sref="employees/employeeDetails({employeeId: employee.id})" class="employeeLink"></a>

-

What I've tried with the states:

.state('employees/employeesList', {
        url: '/employees/employeesList',
        templateUrl: 'pages/employees/employeesList.html',
        controller: 'employeesListController'
    })

    .state('employees/employeeDetails', {
        url: '/employees/employeeDetails/:employeeId',
        templateUrl: 'pages/employees/employeeDetails.html',
        resolve: {
            employeeId: function($stateParams) {
                return $stateParams.employeeId;
            }
        },
        controller: function(employeeId) {
            console.log(employeeId)
        }
    })

-

Employees service:

app.service('employeesService', function() {
var employees = [
    {
        id: '21101994',
        firstName: 'Employee',
        lastName: 'One'
    }
];

var addEmployee = function(newObj) {
    employees.push(newObj);
};

var getEmployees = function() {
    return employees;
}

return {
    addEmployee: addEmployee,
    getEmployees: getEmployees
}
})

-

Employees List Controller:

app.controller('employeesListController', function($scope, $stateParams, employeesService) {
    $scope.active = 'active';

    $scope.sortByAllDepartments = '+lastName';

    $scope.employees = employeesService.getEmployees();
})

HalfWebDev HalfWebDev · Accepted Answer · 2017-09-04T14:04:18

The states will be receiving params like

 url: '/employees/employeeDetails/{:employeeId}',

Or

url: '',
params: {
  employeeId: null
},
resolve: {...}

I prefer the second one to receive due to clarity.

To pass all the data of employee, localstorage of employee object will be better in case you need this object frequently or in other parts in application.

localStorage.setItem('employeeData', JSON.stringify(empData));

To access this you can do

let empData = JSON.parse(localstorage.employeeData); //Object

In case you need to need this stored data, let's say you are navigating away from this employeeDetails state, you can delete this

localstorage.removeitem('employeeData');

If you require passing multiple state params, just add a comma separated string

ui-sref="employeeDetails({id: emp_id, name: emp_name, mobile: emp_mobile})"

and then receive this in state as below

params: {
  employeeId: null,
  employeeName: null,
  employeeMobile: null
},

I hope this last makes clear as in why should you avoid passing too many params in stateParams

AngularJS UI-Router / $stateParams - Get data based on object ID

1 Answers