ui route 路由 - Mirror198829/AngularJs1 GitHub Wiki

路由

基本配置代码

html

<li  ui-sref-active="active"><a ui-sref="uiView.vue">路由</a></li>
<li  ui-sref-active="active"><a ui-sref="directive">组件篇</a></li>
<li  ui-sref-active="active"><a ui-sref="relation">控制器指令通信</a></li>

<div ui-view></div>

javascript

app.config(function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise("/relation");
  $stateProvider
    .state("uiView", {
      url: "/uiView",
      templateUrl: "src/template/uiView.html"
    })
    .state("ngForm",{
      url:'/ngFormDemo',
      templateUrl:"src/template/ngForm.html"})
    .state("bootstrap",{
      url:'/bootstrap',
      templateUrl:'src/template/bootstrap.html'})
    .state("404",{
      url:"/404",
      template:"<h1 style='text-align:center;margin-top:100px'>I am sorry,找不到页面,404了哟</h1>"
    })
});

active样式

<li ui-sref-active="active"><a ui-sref="relation">控制器指令通信</a></li>

页面跳转

html跳转

<a href="#/angularJs”>AngularJs详情</a> 
<a ui-sref="angularjs">AngularJs详情</a>

js跳转

app.controller('viewController',['$scope','$state',function($scope,$state){
  $scope.goToNg=function(){
    $state.go('uiView.ng');
  }
}]);

路由嵌套

$stateProvider
   .state("uiView", {
      url: "/uiView",
      templateUrl: "src/template/uiView.html",
      controller:'viewController'
    })
    .state("uiView.ng",{         //嵌套路由：在父路由状态下后“.子路由名称”
      url:"/vue",
      template:"<div>我是ng</div>",
    })

传参

通过config传参

route.js

.state("uiView.ng",{
      url:"/ng",
      template:"<div>我是AngularJs,我获取到的参数 Id为:{{Id}}</div>",
      controller:'ngController',
      params:{
        id:{value:'"通过路由配置传递的参数Id"'}
      }
})
app.controller('ngController',['$scope','$stateParams',function($scope,$stateParams){
  $scope.Id=$stateParams.id;
}])

ui-sref传参

<li ui-sref-active="active"><a ui-sref=".ng({id:'我是通过ui-sref传递的参数'})">AngularJs</a></li>

$state.go传参

$state.go('uiView.ng',{id:'我是通过$state.go()传递的参数'})

href传参

<li ui-sref-active="active"><a href="#/uiView/ng/'我是通过href来传参的'">AngularJs</a></li>

route.js

.state("uiView.ng",{
      url:"/ng/:id",
      template:"<div>我是AngularJs,我获取到的参数 Id为:{{Id}}</div>",
      controller:'ngController'
})
⚠️ **GitHub.com Fallback** ⚠️