例子

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <div class="router-content">
        <!-- 5. 定义改变视图的的按钮 -->
        <!-- sref中你只能使用state名,加上一些参数 -->
        <a ui-sref="R1({id:4,number:5})">R1</a><br>
        <button ng-click="goR2()">R2</button>
        <button ng-click="goR3()">R3</button>
        <!-- 2. 定义视图 -->
        <div ui-view></div>
      </div>
    </div>
    <script>
      // 1. 注入相关的模块
      var app = angular.module("myApp", ["ui.router"]);
      app.controller("myCtrl", function ($scope,$state) {
        $scope.indexName = "主页";
        $scope.goR2 = function(){
          // 传递参数
            $state.go("R2",{id:2,number:5})
        };
        $scope.goR3 = function () {
          $state.go("R3",{id:6,number:6});
        }
      });
      // 3. 配置路由,注意传入$stateProvider
      app.config(function($stateProvider){
          // 4. 定义两个路由
          /*
          从R1跳转到R2并将R1的参数传过去
          */
          $stateProvider.state("R1",{
            url:"R1?id&number", // 参数声明
            template:"<h1>Hello</h1>",
            controller:function($scope,$stateParams){
              console.log($stateParams);
            }
          });
          // 在路径中映射参数
          $stateProvider.state("R2",{
            url:"R2/:id/:number", // 参数声明
            template:"<h1>World</h1>",
            controller:function($scope,$stateParams){
              console.log($stateParams);
            }
          });

          $stateProvider.state("R3",{
            url:"R3", // 参数声明
            template:"<h1>World_R3</h1>",
            controller:function($scope,$stateParams){
              console.log($stateParams);
            },
            // 参数声明
            params:{
              id:null,
              number:null
            }
          });
      })
    </script>
  </body>
</html>