AngularJs ui-router路由跳转传参-蒲公英云

AngularJs ui-router路由跳转传参

1、在跳转a标签中通过跳转指令设置
        ui-sref='state名称({键值对1,键值对2})'
            其中,值如果是变量会自动解析,如果是字符串需要加""
2、在对应state路由中设置
        在url路径后添加"/{键名}/{键名}"
3、读取参数
    在对应的controller中,注入$stateParams
        $stateParams.键名调用

代码示例:

<html ng-app="app" ng-controller="main">
<head>
    <meta charset="utf-8">
    <title ></title>
    <script src="js/libs/angular.js"></script>
    <script src="js/libs/angular.route.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
 <style>
    .a{ 
        color:red;
    }
 </style>
</head>
<body>
<div ng-controller='d1'>
    <a href="#">首页</a>
    <a href="#/home">home</a>
    //传入参数
    <a href="" ui-sref='movie({sex:"male",age:"18"})'>movie</a>
    <a href="" ng-click="go('home')">跳转到home</a>
    <!-- 当访问路由出错,会显示内容 -->
    <div ui-view>页面不存在</div>
</div>
<script>
var app=angular.module('app',['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ 
        //将'/hd'设置为默认页,打开页面自动跳转
        $urlRouterProvider.otherwise('');
        //创建路由
        $stateProvider.state('default',{ 
            //路径为空表示在当前页面
            url:'',
            template:'<h1>哈哈</h1>'
        })
        .state('home',{ 
            url:'/home',
            template:'<h1>home{ {name}}</h1>',
            //控制器
            controller:['$scope',function($scope){ 
                $scope.name='jeff'
            }]
        })
        .state('movie',{ 
        //接收参数
            url:'/movie/{sex}/{age}',
            templateUrl:'./angular/user.html',
            controller:'movieCon'
        })
}])
app.controller('main',['$scope',function($scope){ 
}])
app.controller('d1',['$scope','$state',function($scope,$state){ 
    $scope.go=function(url)
    { 
        $state.go(url);
    }
}])
app.controller('movieCon',['$scope','$stateParams',function($scope,$stateParams){ 
    $scope.age=17;
    $scope.user=[
    { id:1,name:'jeff'},
    { id:2,name:'mike'}
    ]
    //读取参数
    console.log($stateParams.sex,$stateParams.age)
}])
</script>
</body>
</html>