1、基于ui-router的页面跳转传参
(1) 用ui-router定义路由，比如有两个页面，一个页面(producers.html)放置了多个producers，点击其中一个目标，页面跳转到对应的producer页面，同时将producerId这个参数传过去。
.state('producers',{
url:'/producers',
templateUrl:'views/producers.html',
controller:'ProducersCtrl'})
.state('producers',{
url:'/producer/:producerId',
templateUrl:'views/producer.html',
controller:'ProducerCtrl'})
(2)在producer.html中，定义点击事件，比如ng-click="toProducer(producerId)", 在ProducersCtrl中，定义页面跳转函数(使用ui-router的$state.go接口)：
.controller('ProducersCtrl', function($scope, $state) {
$scope.toProducer= function(producerId) {
$state.go('producer', {producerId: producerId});
};
});
(3)在ProducerCtrl中，通过ui-router的$stateParams获取参数producerId,
.controller('ProducerCtrl', function($scope, $state, $stateParams){var producerId =$stateParams.producerId;
});
2、基于factory的页面跳转传参
举例：有N个页面，每个页面都需要用户填选信息，最终引导用户至尾页提交，同时后一个页面要显示前面所有页面填写的信息。这时用factory传参是比较合理的选择
1 .factory('myFactory', function() {2 //定义参数对象
3 var myObject ={};4
5 /**6 * 定义传递数据的setter函数7 * @param {type} xxx8 * @returns {*}9 * @private10 */
11 var _setter = function(data) {12 myObject =data;13 };14
15 /**16 * 定义获取数据的getter函数17 * @param {type} xxx18 * @returns {*}19 * @private20 */
21 var _getter = function() {22 returnmyObject;23 };24
25 //Public APIs
26 //在controller中通过调setter()和getter()方法可实现提交或获取参数的功能
27 return{28 setter: _setter,29 getter: _getter30 };31 });
3、基于factory和$rootScope.$broadcast()的传参
(1)举例：
在一个单页中定义了nested views，你希望让所有子作用域都监听到某个参数的变化，并且作出相应动作。比如一个地图应用，某个$state中定义元素input，输入地址后，地图要定位，同时另一个状态下的列表要显示出该位置周边商铺的信息，此时多个$scope都在监听地址变化。
PS: $rootScope.$broadcast()可以非常方便的设置全局事件，并让所有子作用域都监听到。
.factory('addressFactory', ['$rootScope', function($rootScope) {//定义所要返回的地址对象
var address ={};//定义components数组，数组包括街道，城市，国家等
address.components =[];//定义更新地址函数，通过$rootScope.$broadcast()设置全局事件'AddressUpdated'
//所有子作用域都能监听到该事件
address.updateAddress = function(value) {this.components =angular.copy(value);
$rootScope.$broadcast('AddressUpdated');
};//返回地址对象
returnaddress;
}]);
(2)在获取地址的controller中：
//动态获取地址，接口方法省略
var component ={
addressLongName: xxxx,
addressShortName: xx,
cityLongName: xxxx,
cityShortName: xx,
countryLongName: xxxx,
countryShortName: xx,
postCode: xxxxx
};//定义地址数组
$scope.components =[];
$scope.$watch('components', function() {//将component对象推入$scope.components数组
components.push(component);//更新addressFactory中的components
addressFactory.updateAddress(components);
});
(3)在监听地址变化的controller中：
//通过addressFactory中定义的全局事件'AddressUpdated'监听地址变化
$scope.$on('AddressUpdated', function() {//监听地址变化并获取相应数据
var street = address.components[0].addressLongName;var city = address.components[0].cityLongName;//通过获取的地址数据可以做相关操作，譬如获取该地址周边的商铺，下面代码为本人虚构
shopFactory.getShops(street, city).then(function(data) {if(data.status === 200){
$scope.shops=data.shops;
}else{
$log.error('对不起，获取该位置周边商铺数据出错: ', data);
}
});
});
4. 基于localStorage或sessionStorage的页面跳转传参
注意事项：通过LS或SS传参，一定要监听变量，否则参数改变时，获取变量的一端不会更新。AngularJS有一些现成的WebStorage dependency可以使用，譬如gsklee/ngStorage · GitHub，grevory/angular-local-storage · GitHub。下面使用ngStorage来简述传参过程：
(1) 上传参数到localStorage - Controller A
//定义并初始化localStorage中的counter属性
$scope.$storage = $localStorage.$default({
counter:0});//假设某个factory(此例暂且命名为counterFactory)中的updateCounter()方法//可以用于更新参数counter
counterFactory.updateCounter().then(function(data) {//将新的counter值上传到localStorage中
$scope.$storage.counter =data.counter;
});
(2)监听localStorage中的参数变化 - Controller B
$scope.counter =$localStorage.counter;
$scope.$watch('counter', function(newVal, oldVal) {//监听变化，并获取参数的最新值
$log.log('newVal: ', newVal);
});
5. 基于localStorage/sessionStorage和Factory的页面传参
由于传参出现的不同的需求，将不同方式组合起来可帮助你构建低耦合便于扩展和维护的代码。
举例：应用的Authentication(授权)。用户登录后，后端传回一个时限性的token，该用户下次访问应用，通过检测token和相关参数，可获取用户权限，因而无须再次登录即可进入相应页面(Automatically Login)。其次所有的APIs都需要在HTTP header里注入token才能与服务器传输数据。此时我们看到token扮演一个重要角色：(a)用于检测用户权限，(b)保证前后端数据传输安全性。以下实例中使用GitHub - gsklee/ngStorage: localStorage and sessionStorage done right for AngularJS.和GitHub - Narzerus/angular-permission: Simple route authorization via roles/permissions。
(1)定义一个名为auth.service.js的factory，用于处理和authentication相关的业务逻辑，比如login，logout，checkAuthentication，getAuthenticationParams等。此处略去其他业务，只专注Authentication的部分。
1 (function() {2 'use strict';3
4 angular5 .module('myApp')6 .factory('authService', authService);7
8 /** @ngInject*/
9 functionauthService($http, $log, $q, $localStorage, PermissionStore, ENV) {10 var apiUserPermission = ENV.baseUrl + 'user/permission';11
12 var authServices ={13 login: login,14 logout: logout,15 getAuthenticationParams: getAuthenticationParams,16 checkAuthentication: checkAuthentication17 };18
19 returnauthServices;20
21
22
23 /**24 * 定义处理错误函数，私有函数。25 * @param {type} xxx26 * @returns {*}27 * @private28 */
29 functionhandleError(name, error) {30 return $log.error('XHR Failed for ' + name + '.\n', angular.toJson(error, true));31 }32
33 /**34 * 定义login函数，公有函数。35 * 若登录成功，把服务器返回的token存入localStorage。36 * @param {type} xxx37 * @returns {*}38 * @public39 */
40 functionlogin(loginData) {41 var apiLoginUrl = ENV.baseUrl + 'user/login';42
43 return$http({44 method: 'POST',45 url: apiLoginUrl,46 params: {47 username: loginData.username,48 password: loginData.password49 }50 })51 .then(loginComplete)52 .catch(loginFailed);53
54 functionloginComplete(response) {55 if (response.status === 200 && _.includes(response.data.authorities, 'admin')) {56 //将token存入localStorage。
57 $localStorage.authtoken =response.headers().authtoken;58 setAuthenticationParams(true);59 } else{60 $localStorage.authtoken = '';61 setAuthenticationParams(false);62 }63 }64
65 functionloginFailed(error) {66 handleError('login()', error);67 }68 }69
70 /**71 * 定义logout函数，公有函数。72 * 清除localStorage和PermissionStore中的数据。73 * @public74 */
75 functionlogout() {76 $localStorage.$reset();77 PermissionStore.clearStore();78 }79
80 /**81 * 定义传递数据的setter函数，私有函数。82 * 用于设置isAuth参数。83 * @param {type} xxx84 * @returns {*}85 * @private86 */
87 functionsetAuthenticationParams(param) {88 $localStorage.isAuth =param;89 }90
91 /**92 * 定义获取数据的getter函数，公有函数。93 * 用于获取isAuth和token参数。94 * 通过setter和getter函数，可以避免使用第四种方法所提到的$watch变量。95 * @param {type} xxx96 * @returns {*}97 * @public98 */
99 functiongetAuthenticationParams() {100 var authParams ={101 isAuth: $localStorage.isAuth,102 authtoken: $localStorage.authtoken103 };104 returnauthParams;105 }106
107 /*
108 * 第一步: 检测token是否有效.109 * 若token有效，进入第二步。110 *111 * 第二步: 检测用户是否依旧属于admin权限.112 *113 * 只有满足上述两个条件，函数才会返回true，否则返回false。114 * 请参看angular-permission文档了解其工作原理https://github.com/Narzerus/angular-permission/wiki/Managing-permissions115 */
116 functioncheckAuthentication() {117 var deferred =$q.defer();118
119 $http.get(apiUserPermission).success(function(response) {120 if (_.includes(response.authorities, 'admin')) {121 deferred.resolve(true);122 } else{123 deferred.reject(false);124 }125 }).error(function(error) {126 handleError('checkAuthentication()', error);127 deferred.reject(false);128 });129
130 returndeferred.promise;131 }132 }133 })();
(2)定义名为index.run.js的文件，用于在应用载入时自动运行权限检测代码。
1 (function() {2 'use strict';3
4 angular5 .module('myApp')6 .run(checkPermission);7
8 /** @ngInject*/
9
10 /**11 * angular-permission version 3.0.x.12 * https://github.com/Narzerus/angular-permission/wiki/Managing-permissions.13 *14 * 第一步: 运行authService.getAuthenticationParams()函数.15 * 返回true：用户之前成功登陆过。因而localStorage中已储存isAuth和authtoken两个参数。16 * 返回false：用户或许已logout，或是首次访问应用。因而强制用户至登录页输入用户名密码登录。17 *18 * 第二步: 运行authService.checkAuthentication()函数.19 * 返回true：用户的token依旧有效，同时用户依然拥有admin权限。因而无需手动登录，页面将自动重定向到admin页面。20 * 返回false：要么用户token已经过期，或用户不再属于admin权限。因而强制用户至登录页输入用户名密码登录。21 */
22 functioncheckPermission(PermissionStore, authService) {23 PermissionStore24 .definePermission('ADMIN', function() {25 var authParams =authService.getAuthenticationParams();26 if(authParams.isAuth) {27 returnauthService.checkAuthentication();28 } else{29 return false;30 }31 });32 }33 })();
(3)定义名为authInterceptor.service.js的文件，用于在所有该应用请求的HTTP requests的header中注入token。关于AngularJS的Interceptor，请参看AngularJS。
1 (function() {2 'use strict';3
4 angular5 .module('myApp')6 .factory('authInterceptorService', authInterceptorService);7
8 /** @ngInject*/
9 functionauthInterceptorService($q, $injector, $location) {10 var authService = $injector.get('authService');11
12 var authInterceptorServices ={13 request: request,14 responseError: responseError15 };16
17 returnauthInterceptorServices;18
19
20
21 //将token注入所有HTTP requests的headers。
22 functionrequest(config) {23 var authParams =authService.getAuthenticationParams();24 config.headers = config.headers ||{};25 if (authParams.authtoken) config.headers.authtoken =authParams.authtoken;26
27 return config ||$q.when(config);28 }29
30 functionresponseError(rejection) {31 if (rejection.status === 401) {32 authService.logout();33 $location.path('/login');34 }35 return$q.reject(rejection);36 }37 }38 })();
转自知乎：https://www.zhihu.com/question/33565135
2149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
