Data Passing Between Pages in AngularJS: A Comprehensive Guide to Service Pattern

Problem Background and Error Analysis

In AngularJS single-page application development, passing data between pages or controllers is a frequent requirement. This article is based on a real-world case of a van management system, where users need to pass a van number from a van listing page (Page A) to a van update page (Page B). Beginners often encounter errors like "Cannot set property 'vanNumber' of undefined," typically due to misunderstandings about AngularJS scope ($scope) lifecycle.

Core Issue: Scope Isolation

In AngularJS, each controller has its own isolated scope. When navigating from Page A to Page B, the controller and its scope in Page A are destroyed, making data set in Page A inaccessible directly in Page B. For example, in the provided code, VanUpdateCtrl attempts to pass data via $scope.formData.cardNumber, but due to scope isolation, the controller in Page B cannot recognize this property.

Solution: Service Pattern

Services are the recommended way to achieve data sharing in AngularJS. As singleton objects that persist throughout the application lifecycle, services allow different controllers to access and modify shared data. Here is a complete service implementation example:

app.factory('sharedDataService', function() {
  var savedData = {};
  
  function set(data) {
    savedData = data;
  }
  
  function get() {
    return savedData;
  }
  
  return {
    set: set,
    get: get
  };
});

This service provides set and get methods for setting and retrieving shared data, respectively. Note that in code examples, characters like <T> must be escaped as <T> to prevent them from being misinterpreted as HTML tags.

Controller Integration

In the controller for the van listing page (Controller A), when a user clicks the update link, call the service's set method to save data:

app.controller('VanListCtrl', ['$scope', 'sharedDataService', function($scope, sharedDataService) {
  $scope.prePopulateForm = function(vanNumber) {
    sharedDataService.set({ vanNumber: vanNumber });
    // Navigate to update page
  };
}]);

In the controller for the van update page (Controller B), retrieve data via the service's get method and bind it to the scope:

app.controller('VanUpdateCtrl', ['$scope', 'sharedDataService', function($scope, sharedDataService) {
  $scope.formData = sharedDataService.get();
}]);

This ensures that formData.vanNumber is correctly bound to the input field in the update page, avoiding "undefined" errors.

Advanced Topics and Best Practices

Beyond the basic service pattern, developers might consider using $rootScope or route parameters (e.g., $routeParams) for data passing, but the service pattern offers better encapsulation and testability. In practice, it is important to:

• Keep services focused on a single responsibility to avoid overcomplication.
• Use dependency injection to ensure controllers properly access services.
• Escape tags that are part of text content in HTML, such as describing the <br> tag as <br>, to maintain DOM integrity.

Conclusion

By leveraging the service pattern, AngularJS developers can efficiently and reliably pass data between pages, overcoming challenges posed by scope isolation. The case study and code examples in this article illustrate the full process from problem diagnosis to solution, emphasizing the importance of code escaping and clear structure. Mastering these techniques will contribute to building more robust and maintainable web applications.