angularjs项目的页面跳转如何实现(5种方法)


Posted in Javascript onMay 25, 2017

Angular页面传参有多种办法,根据不同用例,我举5种最常见的:

PS: 在实际项目中,请参照https://github.com/johnpapa/angular-styleguide优化您的代码。

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/https://github.com/grevory/angular-local-storage。下面使用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); 
   }
  }
})();

自己总结;(1)ng-click = "isShow"; $sope.isShow = true; (2)配置路由;(3)使用$location.urle(./mainchat/message.html);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
js内置对象 学习笔记
Aug 01 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
AngularJS基于factory创建自定义服务的方法详解
May 25 #Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 #Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
基于VUE选择上传图片并页面显示(图片可删除)
May 25 #Javascript
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 #Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 #Javascript
You might like
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
微信小程序自定义组件
2017/08/16 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python中base64加密解密方法实例分析
2015/05/16 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
python 绘制场景热力图的示例
2020/09/23 Python
Python 实现集合Set的示例
2020/12/21 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
合作经营协议书范本
2014/04/17 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
感谢信范文大全
2015/01/23 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
Python matplotlib绘制雷达图
2022/04/13 Python