AngularJS 基于 factory，实现页面的跳转和传参（二）

背景

上一章讲述了 AngularJS 基于 ui-router，实现页面的跳转和传参（一）

本章讲述，AngularJS基于 factory ，实现页面的跳转和传参。

应用场景： 如果你想开个店，需要填写很多信息，才能提交认证。这就需要多个页面，引导用户从头到尾，同时，后一个页面要显示前面所有页面填写的信息。 这时候，用factory传参是比较合理的选择。

代码示例：

创建 app.js 文件，构建 factory、Controller 方法：

// app.js 

var app = angular.module('myApp', []);
 app.factory('testFactory', function(){
   var testObject = [];
   var _setter = function (data) {
      testObject.push(data);
    };
     var _getter = function () {
      return testObject;
    };
     return {
      setter: _setter,
      getter: _getter
    }               
});

app.controller('InputCtrl', function ($scope, testFactory) {
      $scope.addInput = function() {
      testFactory.setter($scope.input);
       $scope.input = {
        name: '',
        age: null,
        title: ''
      };
    };
});

app.controller('OutputCtrl', function ($scope, testFactory) {
    $scope.persons = testFactory.getter();
    console.log( "persons=" + $scope.persons) ;
});

构建视图文件

创建 index.html 视图文件。在这个示例中，只需要一个视图文件和一个控制器文件。

    
  
 

 
 



 

  

    
填写信息
    
    

      

      

      

      

    
  
       
 员工列表 
  

   

      

        {{p.name}}, {{p.age}}, {{p.title}}
      
    
  
   
  

这里要特别注意：

这是要触发表单的提交方法。 通过ng-submit 提交form中数据。

运行结果

基于 factory 的页面跳转

AngularJS 基于 ui-router，实现页面的跳转和传参（一）

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。