版权声明：本文为博主原创文章，未经博主允许不得转载
传参方式
一般情况，主要用以下两种传参方式：
- $state.go(''stateName", {paramName: param})
- ui-sref="stateName({})"
下面来根据一个示例体验以下基本传参, html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<link href="css/index.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="nestedViews/app2.js"></script>
</head>
<body ng-app="TrialApp" ng-controller="MainController">
<header>
<h1>Nav Bar</h1>
</header>
<nav>
<h3>Side Bar</h3><br />
<a ui-sref="1">Page 1</a><br />
<a ui-sref="2">Page 2</a><br />
<a ui-sref="params({ID:1})">Params</a><br />
</nav>
<div ui-view>
</div>
<footer>
Copyright Nobody
</footer>
</body>
</html>
上述代码中，演示了ui-sref传参，
<a ui-sref="状态名({参数名:变量（需要声明）})">Params</a><br />
app2.js代码（html中page1的链接可以忽略，我们示例重点在Page2和params上）：
'use strict';
// Define `TrialApp` module
var app = angular.module('TrialApp', ['ui.router']);
// Define routers
app.config(function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'demo2.html',
controller: 'MainController'
})
.state('1', {
url: '/Page1',
templateUrl: 'nestedViews/htmls/1/Page1.html',
controller: function($scope, $state) {
$scope.change = function() {
$state.go('1.1');
}
}
})
.state('2', {
url: '/Page2',
templateUrl: 'nestedViews/htmls/2/Page2.html',
controller: function($scope, $state) {
$scope.transfer = function() {
var id = document.getElementById("id").value;
console.log(id);
$state.go('params',{ID: id});
}
}
})
.state('params', {
url: '/params/:ID',
templateUrl: 'nestedViews/htmls/param.html',
controller: function($scope, $state, $stateParams) {
$scope.index = $stateParams.ID;
$scope.data = [{
id : 1,
name : "victor",
imgSrc: "img/Victor.jpg",
age:24
},{
id : 2,
name : "angela",
imgSrc: "img/Angela.jpg",
age:23
},{
id : 3,
name : "Mark",
imgSrc: "img/Mark.png",
age:12
}];
$scope.exit = function() {
$state.go("2");
}
}
})
});
app.controller('MainController', function() {
//alert("Welcome to nested view demo!");
});
上述代码中，我们设置了一个“params”状态， URL中，切记加上传参名字和前面的冒号：，例如“：ID”，如果传参成功，url地址栏会显示具体参数值； Controller中，含$stateParams参数，方便接收参数，里面创建了一个data数组，里面有我们传参便于最后演示的信息数据。 在状态“2”中，我们创建了传参的函数“transfer()”，用来演示通过$state.go()的方式传参。
Page2.html代码：
<div class="P2">
<h3>View 2</h3>
<input type="text" placeholder="Input ID" id="id"/>
<button ng-click="transfer()">Transfer Params</button>
</div>
上述代码中，我们设置了一个搜索按钮，只要在输入框中，输入id，点击按钮即可切换到相应的页面看到相应的信息
param.html代码：
<h5>Person{{data[index - 1].id}}</h5>
<p>{{data[index - 1].name}} {{data[index - 1].age}}</p><br />
<img src="{{data[index - 1].imgSrc}}" /><br />
<button type="button" ng-click="exit()">Exit</button>
接着我们来看下效果：
![AngularJS2入门实例（1）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)