背景
上一章讲述了 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 视图文件。在这个示例中，只需要一个视图文件和一个控制器文件。
<!DOCTYPE html>
<html>
<head>
<title> AngularJS factory example </title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' />
<script type="text/javascript" src= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<script type="text/javascript" src= "http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>
<script type="text/javascript" src="app.js" > </script>
</head>
<body ng-app = "myApp">
<div class ="container" >
<div ng-controller="InputCtrl">
<h2>填写信息</h2>
<form ng-submit="addInput()" >
<input type="text" ng-model="input.name" size="30"
placeholder="输入员工姓名" class="form-control">
<input type="number" ng-model="input.age" size="30"
placeholder="输入员工年龄" class="form-control" >
<input type="text" ng-model="input.title" size="30"
placeholder="输入员工职位" class="form-control" >
<input class="btn-primary" type="submit" value="添加">
</form>
</div>
<h2> 员工列表 </h2>
<div ng-controller="OutputCtrl">
<ul>
<li ng-repeat="p in persons">
{{p.name}}, {{p.age}}, {{p.title}}
</li>
</ul>
</div>
</div>
</body>
</html>
这里要特别注意：
<form ng-submit="addInput()" >
这是要触发表单的提交方法。 通过ng-submit提交form中数据。
运行结果
基于 factory 的页面跳转
AngularJS 基于 ui-router，实现页面的跳转和传参（一）
参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》
更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。
网友评论