Angularjs中UI Router常见问题在需要跳转到页面的controller里面接收参数，我们的参数就在$sta

安装serve

####1、安装serve
D:project>npm -g install serve

####2、查看serve帮助
D:project>serve --help

####3、启动应用
D:project>serve -l 8765

一：ui-router实现单页面应用

目录结构如下：

入口文件index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Pragma" contect="no-cache">
    <title>主页</title>
</head>
<body data-ng-app="myApp">
    <p>欢迎学习angular</p>
<div data-ui-view=""></div>	
<p>
    最后我们都走到了终点
</p>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script type="text/javascript" src="App.js"></script>
</body>

login.html

<div ng-controller="loginCtrl">
    用户名：<input type="text"> </br>
    密码：<input type="text" style="margin: 10px">
    <button type="button" ng-click="login()">提交</button>
</div>

PageTab.html

<div ng-controller="tabCtrl">
    <h1>下面这几个按钮是在主页面下面再嵌套一层的页面</h1>
    <!--方式一：使用ui-sref跳转-->
    <!-- <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
    <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
    <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span> -->

	<!--方式二：使用$location.path跳转-->
    <button ng-click="handleA()">页面1</button>
    <button ng-click="handleB()">页面2</button>
    <button ng-click="handleC()">页面3</button>
</div>
<div>
    <!--PageTap嵌套的视图html展示的地方-->
    <div ui-view=""/>
</div>

Page-1

<div>
    <div>
        <h1>页面1......</h1>
    </div>
</div>

Page-2

<div>
    <div>
        <h1>页面2......</h1>
    </div>
</div>

Page-3

<div>
    <div>
        <h1>页面3......</h1>
    </div>
</div>

App.js

var myApp = angular.module("myApp", ["ui.router"]);
//这里叫做App模块，这将告诉HTML页面这是一个AngularJS作用的页面，并把ui-router注入AngularJS主模块，它的内容由AngularJS引擎来解释。
myApp.config(function ($stateProvider, $urlRouterProvider) {
  //这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了.
  $urlRouterProvider.when("", "/login");
  //如果没有路由引擎能匹配当前的导航状态，默认将路径路由至 PageTab.html, 那它就像switch case语句中的default选项.就是一个默认的视图选项
  $stateProvider
  //这一行定义了会在main.html页面第一个显示出来的状态（就是进入页面先加载的html），作为页面被加载好以后第一个被使用的路由.login
      .state("login", {
        url: "/login",//#+标识符，这里就是url地址栏上面的标识符，通过标识符，进入不同的html页面
        templateUrl: "login.html",//这里是html的路径，这是跟标识符相对应的html页面
        controller: "loginCtrl"
      })
      .state("PageTab", {
        url: "/PageTab",//#+标识符，这里就是url地址栏上面的标识符，通过标识符，进入不同的html页面
        templateUrl: "PageTab.html",//这里是html的路径，这是跟标识符相对应的html页面
        controller:function($state){
          $state.go("PageTab.Page1") // 默认打开这个页面
        }
      })
      .state("PageTab.Page1", {//引号里面代表Page1是PageTab的子页面，用.隔开
        url:"/Page1",
        templateUrl: "Page-1.html"
      })
      .state("PageTab.Page2", {//需要跳转页面的时候，就是用这双引号里面的地址
        url:"/Page2",
        templateUrl: "Page-2.html"
      })
      .state("PageTab.Page3", {
        url:"/Page3",
        templateUrl: "Page-3.html"
      });
});	
myApp.controller('loginCtrl',function ($scope,$rootScope,$http,$state) {	
  $scope.login = function () {
    // 跳转到主页
    $state.go('PageTab');
  }


 
});



myApp.controller('tabCtrl',function ($scope,$location,$http,$state) {
  $scope.handleA = function() {
    console.log('点击A')
    $location.path('/PageTab/Page1')
  }

  $scope.handleB = function() {
    console.log('点击B')
    $location.path('/PageTab/Page2')
  }

  $scope.handleC = function() {
    console.log('点击C')
    $location.path('/PageTab/Page3')
  }
  })

实现的效果

二：ui-router跳转传递参数

1) 使用params传递参数

步骤一：路由的配置

.state("PageTab.Page1", {//引号里面代表Page1是PageTab的子页面，用.隔开
        url:"/Page1",
        params:{tranParam:{}}, // 这里配置的是传递参数的占位符，tranParam是我们要传递的参数自定义名称
        templateUrl: "Page-1.html"
      })
.state("PageTab.Page2", {//需要跳转页面的时候，就是用这双引号里面的地址
  url:"/Page2",
  params:{tranParam:{}},
  templateUrl: "Page-2.html"
})
.state("PageTab.Page3", {
  url:"/Page3",
  params:{tranParam:{}},
  templateUrl: "Page-3.html"
});

步骤二：传递参数

 $scope.handleA = function() {
    console.log('点击A')
    let tranParam = [
      {
        name: '张三',
        age: 20
      },
      {
        name: '李四',
        age: 23
      },
      {
        name: '王五',
        age: 24
      }

    ]
    $state.go('PageTab.Page1',{tranParam})
  }

分析：

$state.go(),第一个参数是路由表里面的状态，第二个参数是一个对象，对象里是我们要传递的参数

步骤三：接收递参数

myApp.controller('Page1',function ($scope,$stateParams,$http,$state) {
  console.log('数据：',$stateParams.tranParam)
  $scope.pageData = $stateParams.tranParam
})
myApp.controller('Page2',function ($scope,$stateParams,$http,$state) {
  $scope.pageData = $stateParams.tranParam
})

myApp.controller('Page3',function ($scope,$stateParams,$http,$state) {
  $scope.pageData = $stateParams.tranParam
})

分析：

在需要跳转到页面的controller里面接收参数，我们的参数就在$stateParams对象里面。所以，通过$stateParams.tranParam就可以拿到传递过来的参数了。