AngularJS五种页面传参方法详解：ui-router与factory示例

在AngularJS中，页面传参是开发单页应用时经常遇到的需求。本文将介绍五种常见的Angular页面传参方法，主要关注于基于UI-Router的页面跳转和基于factory的服务进行数据传递。 1. 基于UI-Router的页面跳转传参 UI-Router是AngularJS的一个强大路由库，它提供了灵活的路由管理和参数传递功能。首先，在`app.js`中定义路由： - 在`app.js`中，我们为`producers`页面和`producer`页面设置路由规则： ```javascript .state('producers', { url: '/producers', templateUrl: 'views/producers.html', controller: 'ProducersCtrl' }) .state('producer', { url: '/producer/:producerId', templateUrl: 'views/producer.html', controller: 'ProducerCtrl' }) ``` - 在`producers.html`中，使用`ng-click`指令定义点击事件，通过`ProducersCtrl`的`toProducer`方法传递`producerId`参数： ```html <button ng-click="toProducer(producerId)">查看生产者</button> ``` - `ProducersCtrl`控制器中，定义`toProducer`函数，使用`$state.go`方法跳转并携带参数： ```javascript .controller('ProducersCtrl', function($scope, $state) { $scope.toProducer = function(producerId) { $state.go('producer', { producerId: producerId }); }; }) ``` - 在`ProducerCtrl`中，利用`$stateParams`服务获取传入的`producerId`： ```javascript .controller('ProducerCtrl', function($scope, $state, $stateParams) { var producerId = $stateParams.producerId; // 使用producerId处理页面内容 }) ``` 2. 基于factory的服务传参 当需要跨多个页面传递数据且数据处理逻辑复杂时，可以使用factory创建一个服务，将数据存储在其中。例如，处理用户填写信息并传递至下一个页面： ```javascript .factory('sharedDataFactory', function() { return { formData: {}, passFormData: function(newFormData) { this.formData = newFormData; }, getData: function() { return this.formData; } }; }) ``` 在需要的地方注入`sharedDataFactory`，并在页面之间传递数据： - 在前一个页面提交表单时，调用`passFormData`： ```javascript .controller('PrevPageCtrl', function($scope, sharedDataFactory) { $scope.submit = function() { sharedDataFactory.passFormData($scope.formValues); }; }) ``` - 在后一个页面获取并展示数据： ```javascript .controller('NextPageCtrl', function($scope, sharedDataFactory) { $scope.formData = sharedDataFactory.getData(); }) ``` 总结来说，AngularJS提供了多种方式实现页面传参，包括基于UI-Router的路由参数传递、factory服务的共享数据模式。开发者应根据实际需求选择合适的方法，确保数据的流动性和应用程序的可维护性。