Back/Return button with AngularJS

Question

I'm very new in Angular and have a problem.

I have page with list of a items (some appointments).

AppointmentsSummary.chtml

<div class="border-section">
    <table>
        <thead>
        ...
        </thead>
        <tbody>
         <tr ng-repeat="app in appts">
          <td>
            <a href="#/Appointments/AppointmentsSummary/MessageHistory/{{app.patientId}}">
                 <button type="button">Message history</button>
            </a>
          </td>
         </tr>
        </tbody>
    </table>
</div>

And I have a controller for this template:

function AppointmentsSummaryController($scope, $location, AppointmentResource) {
 console.log("loaded..");
 $scope.appts = AppointmentResource.getAll({
           .....(params)
        });

}

When I clicked on the button "Message history" on the AppointmentsSummary.html - I relocate to page MessageHistiry.html, which has a "Back" button.

<a href="#/Appointments/AppointmentsSummary">
    <button type="button">Back</button>
</a>

When I push this button, I return to list of appointments and AppointmentsControllerSummary reloaded and $scope.appts becomes null.

For routing between pages I uses $routeProvider (same with below)

$routeProvider.when(/Appointments/AppointmentsSummary/MessageHistory/:patientId', {
                        controller:'MessageHistoryController',
                        templateUrl:'Template/MessageHistory',
                        reloadOnSearch: false

Can I not reload this controller and save my $scope data?

Answer 1

You need to save your data in a service. Services are singletons, meaning they always return the same instance and therefore preserve state. Controllers get re-instantiated each time they are loaded and therefore do not preserve state.

myApp.factory('MyService', function() {
    var appts = AppointmentResource.getAll({
       .....(params)
    });

    return {
       appts: appts
    };
});

Then in your controller, you can just do..

$scope.appts = MyService.appts;

The appts variable in the service won't get reloaded when you reload controllers and the data will be preserved. From the angular docs ...

"Lastly, it is important to realize that all Angular services are application singletons. This means that there is only one instance of a given service per injector."

Often when preserving state is the issue, singletons are the solution.

Answer 2

Thanks to Charlie Martin for idea with singleton-service.

I create appointmentService

.factory('appointmentService', function (AppointmentResource, dateSharedService, doctorSharedService) {

    appointmentService = {};

    appointmentService.reloadAppts = function() {
        appointmentService.appts = AppointmentResource.getAll({
            filterFirstDate: dateSharedService.firstDate,
            filterSecondDate: dateSharedService.secondDate,
            doctorIds: doctorSharedService.doctorIds
        });
    };

    appointmentService.appts = AppointmentResource.getAll({
        filterFirstDate: dateSharedService.firstDate,
        filterSecondDate: dateSharedService.secondDate,
        doctorIds: doctorSharedService.doctorIds
    });

    return appointmentService;
});

And, so, this is part of code from my controller:

function AppointmentsSummaryController($scope, appointmentService) {
    $scope.appts = appointmentService.appts;

    $scope.$on('firstDateChanges', function () {   
        appointmentService.reloadAppts();
        $scope.appts = appointmentService.appts;
    });

    $scope.$on('secondDateChanges', function () {
        appointmentService.reloadAppts();
        $scope.appts = appointmentService.appts;
    });
    .....
}

When I load my controller at first, I get default appointments, which will today. If params from scope changes - appointmentService get it from another injected services (dateSharedService, doctorSharedService).