AngularJS页面传参的5种方式


Posted in Javascript onApril 01, 2017

Angular页面传参有多种办法,根据不同用例,我举5种最常见的(请在网页版知乎浏览答案):

1. 基于ui-router的页面跳转传参

(1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去。

.state('producers', {
  url: '/producers',
  templateUrl: 'views/producers.html',
  controller: 'ProducersCtrl'
})
.state('producer', {
  url: '/producer/:producerId',
  templateUrl: 'views/producer.html',
  controller: 'ProducerCtrl'
})

(2) 在producers.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传参是比较合理的选择(下面的代码是一个简化版,根据需求可以不同定制):

.factory('myFactory', function () {  
  //定义参数对象
  var myObject = {};
  /**
   * 定义传递数据的setter函数
   * @param {type} xxx
   * @returns {*}
   * @private
   */
  var _setter = function (data) {
    myObject = data;   
  };
  /**
   * 定义获取数据的getter函数
   * @param {type} xxx
   * @returns {*}
   * @private
   */
  var _getter = function () {
    return myObject;
  };
  // Public APIs
  // 在controller中通过调setter()和getter()方法可实现提交或获取参数的功能
  return {
    setter: _setter,
    getter: _getter
  };
});

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');
  };
  // 返回地址对象
  return address;
}]);

(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的部分。

(function() {
'use strict';

  angular
   .module('myApp')
   .factory('authService', authService);

  /** @ngInject */
  function authService($http, $log, $q, $localStorage, PermissionStore, ENV) {
   var apiUserPermission = ENV.baseUrl + 'user/permission';

   var authServices = {
    login: login,
    logout: logout,
    getAuthenticationParams: getAuthenticationParams,
    checkAuthentication: checkAuthentication
   };
   return authServices;
   ////////////////
   /**
    * 定义处理错误函数,私有函数。
    * @param {type} xxx
    * @returns {*}
    * @private
    */
   function handleError(name, error) {
    return $log.error('XHR Failed for ' + name + '.\n', angular.toJson(error, true));
   }
   /**
    * 定义login函数,公有函数。
    * 若登录成功,把服务器返回的token存入localStorage。
    * @param {type} xxx
    * @returns {*}
    * @public
    */
   function login(loginData) {
    var apiLoginUrl = ENV.baseUrl + 'user/login'; 
    return $http({
     method: 'POST',
     url: apiLoginUrl,
     params: {
      username: loginData.username,
      password: loginData.password
     }
    })
    .then(loginComplete)
    .catch(loginFailed);
    function loginComplete(response) {
     if (response.status === 200 && _.includes(response.data.authorities, 'admin')) {
      // 将token存入localStorage。
      $localStorage.authtoken = response.headers().authtoken;
      setAuthenticationParams(true);
     } else {
      $localStorage.authtoken = '';
      setAuthenticationParams(false);
     }
    }
    function loginFailed(error) {
     handleError('login()', error);
    }
   }
   /**
    * 定义logout函数,公有函数。
    * 清除localStorage和PermissionStore中的数据。
    * @public
    */
   function logout() {
    $localStorage.$reset();
    PermissionStore.clearStore();
   }
   /**
    * 定义传递数据的setter函数,私有函数。
    * 用于设置isAuth参数。
    * @param {type} xxx
    * @returns {*}
    * @private
    */
   function setAuthenticationParams(param) {
    $localStorage.isAuth = param;
   }
   /**
    * 定义获取数据的getter函数,公有函数。
    * 用于获取isAuth和token参数。
    * 通过setter和getter函数,可以避免使用第四种方法所提到的$watch变量。
    * @param {type} xxx
    * @returns {*}
    * @public
    */   
   function getAuthenticationParams() {
    var authParams = {
     isAuth: $localStorage.isAuth,
     authtoken: $localStorage.authtoken
    };
    return authParams;
   }  
   /* 
    * 第一步: 检测token是否有效.
    * 若token有效,进入第二步。
    *
    * 第二步: 检测用户是否依旧属于admin权限.
    *
    * 只有满足上述两个条件,函数才会返回true,否则返回false。 
    * 请参看angular-permission文档了解其工作原理https://github.com/Narzerus/angular-permission/wiki/Managing-permissions
    */
   function checkAuthentication() {
    var deferred = $q.defer();
    $http.get(apiUserPermission).success(function(response) {
     if (_.includes(response.authorities, 'admin')) {
      deferred.resolve(true);
     } else {
      deferred.reject(false);
     }
    }).error(function(error) {
     handleError('checkAuthentication()', error);
     deferred.reject(false);
    });
    return deferred.promise;
   }
  }
})();

(2)定义名为index.run.js的文件,用于在应用载入时自动运行权限检测代码。

(function() {
 'use strict';
 angular
  .module('myApp')
  .run(checkPermission);
 /** @ngInject */
 /**
  * angular-permission version 3.0.x.
  * https://github.com/Narzerus/angular-permission/wiki/Managing-permissions.
  * 
  * 第一步: 运行authService.getAuthenticationParams()函数.
  * 返回true:用户之前成功登陆过。因而localStorage中已储存isAuth和authtoken两个参数。 
  * 返回false:用户或许已logout,或是首次访问应用。因而强制用户至登录页输入用户名密码登录。
  *
  * 第二步: 运行authService.checkAuthentication()函数.
  * 返回true:用户的token依旧有效,同时用户依然拥有admin权限。因而无需手动登录,页面将自动重定向到admin页面。
  * 返回false:要么用户token已经过期,或用户不再属于admin权限。因而强制用户至登录页输入用户名密码登录。
  */
 function checkPermission(PermissionStore, authService) {
  PermissionStore
   .definePermission('ADMIN', function() {
    var authParams = authService.getAuthenticationParams();
    if (authParams.isAuth) {
     return authService.checkAuthentication();
    } else {
     return false;
    }
   });
 }
})();

(3)定义名为authInterceptor.service.js的文件,用于在所有该应用请求的HTTP requests的header中注入token。关于AngularJS的Interceptor,请参看AngularJS。

(function() {
'use strict';
  angular
   .module('myApp')
   .factory('authInterceptorService', authInterceptorService);
  /** @ngInject */
  function authInterceptorService($q, $injector, $location) {
   var authService = $injector.get('authService'); 
   var authInterceptorServices = {
    request: request,
    responseError: responseError
   };
   return authInterceptorServices;
   ////////////////
   // 将token注入所有HTTP requests的headers。
   function request(config) {
    var authParams = authService.getAuthenticationParams();
    config.headers = config.headers || {};
    if (authParams.authtoken) config.headers.authtoken = authParams.authtoken;
    return config || $q.when(config);
   }
   function responseError(rejection) {
    if (rejection.status === 401) {
     authService.logout();
     $location.path('/login');
    }
    return $q.reject(rejection); 
   }
  }
})();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
jquery实现用户打分评分特效
May 28 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
vue2.0构建单页应用最佳实战
Apr 01 #Javascript
vue货币过滤器的实现方法
Apr 01 #Javascript
javascript 中的try catch应用总结
Apr 01 #Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 #Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 #Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 #Javascript
ES6新特性之函数的扩展实例详解
Apr 01 #Javascript
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python 基于wx实现音乐播放
2020/11/24 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
岳父生日宴会答谢词
2014/01/13 职场文书
《穷人》教学反思
2014/04/08 职场文书
青年志愿者活动总结
2014/04/26 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
学生实习证明范文
2014/09/28 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android