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 相关文章推荐
node+express+jade制作简单网站指南
Nov 26 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
vue cli 全面解析
2018/02/28 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python 如何实现遗传算法
2020/09/22 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
读书演讲主持词
2014/03/18 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
党员争先创优承诺书
2015/01/20 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL