Angular 路由嵌套 ui-view 2023-11-08

 

<!--JS引入文件-->

<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-ui-router.js" ></script>
<script type="text/javascript" src="js/angular-relst.js" ></script>

<!--angular-relst.js文件-->

var app = angular.module('Mywind',['ui.router'])

app.config(function($stateProvider,$urlRouterProvider){
　　

app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider
   　　 .otherwise('index1');
  　　 　　 $stateProvider
  　　 　　 .state('index1',{
    　　　　url:'/index1',
  　　  　　templateUrl:'ui-router/index1.html'
　　　　})
　　.state('index2',{
　　　　url:'/index2',
　　　　templateUrl:'ui-router/index2.html'
　　})
//子路由
　　.state("index1.Page1", {
　　　　url:"/Page1",
　　　　templateUrl: "ui-router/zi-router/ui-page1.html"
　　})

　　})

})

 

//文件存放目录

index.html

　　<div class="nav" ng-app="Mywind">
　　　　<h4>路由嵌套</h4>
　　　　<a ui-sref="index1">ui-router-name1</a>
　　　　<a ui-sref="index2">ui-router-name2</a>
　　　　<div ui-view></div>
　　</div>

//父路由存放目录  ui-router/

index1.html

　　<a ui-sref="index1.Page1">落叶</a>
　　<div ui-view></div>

index2.html

　　<div>秋风</div>

//子路由存放目录 zi-ruter/

ui-page1.html

　<div>草叶</div>

 

每个菜鸟都有一个成为大神的梦想而我正在努力中....