AngularJS 基于 ui-router，实现页面的跳转和传参（一）

背景

只要是与视图相关的产品，不管是App 还是 web 应用，都会涉及两个技术点： 页面的跳转；伴随着页面跳转，需要把一个页面的参数传递到下一个页面。最常见的场景是：首页是一个商品列表， 点击某个商品，跳转到商品的详情页面。 这时候，就需要把商品的id传递给详情页面，从而获取到该商品的更多的信息。

以上这些，对于AngularJS来说，该如何实现呢？

当然，我们会说，AngularJS页面传参有多种方法，根据应用场景，娓娓道来。 我们先从 ui-router说起。

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

在 AngularJS的app.js中，用ui-router 定义路由。 关于 ui-router 的应用，请参考 AngularJS ui-router的应用场景

应用场景： 有两个页面， 一个是商品列表页(products.html)，一个是商品详情页(details.html)。点击商品列表中的某个商品，跳转到商品详情页面。 这时候，需要把 product_id 这个参数传递给详情页面。

(1) 页面跳转（路由配置）

var app = angular.module ('app', ['ui.router']) ;
app.config( [ '$stateProvider', function( $stateProvider ) {

   $stateProvider
   .state('products', {
        url: '/products',
        templateUrl: 'products.html' ,
        controller: 'productsCtrl'
   })
   .state('details', {
       url: '/details',
       templateUrl: 'details.html' ,
        controller: 'detailsCtrl'
   })
}]);

（2）控制器的实现
在 products.html中，定义一个点击事件，比如： ng-click=“toDetails（product_id）。 在productsCtrl中，定义页面跳转函数，使用ui-router 的 $state.go 接口。

app.controller('productsCtrl', function($scope, $state) {
   $scope.toDetails = function(product_id) {
   $state.go ('details', { product_id: product_id } )
   };
} );

(3) 在 detailCtrl 控制器方法中，通过 ui-router 的 $stateParams 获取 参数 product_id , 代码如下：

app.controller('detailsCtrl', function($scope, $state,$stateParams) {
  var product_id = $stateParams.product_id;
} );

运行结果

商品列表首页

点击商品列表中的某件商品， 跳转到详情页面。详情页面的效果如下：

跳转到商品详情页面

---

AngularJS ui-router的应用场景

---

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

---

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。