uiRouter路由定义高效的父子级嵌套路由

最新推荐文章于 2024-04-24 21:44:13 发布

K'illCode

最新推荐文章于 2024-04-24 21:44:13 发布

阅读量744

点赞数

分类专栏： angularJS 文章标签： angularJs

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

在项目开发中会到这样的需求，在导航中，有的点击需要在本页面中切换，有的点击需要跳转到其他页面（比如点击登录、注册等），ui-router为我们很方便的解决了这个问题，代码如下：

main.html中的代码：

 
       01<!DOCTYPE html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8">
 
       05    <title>Document</title>
 
       06</head>
 
       07<body ng-app="app">
 
       08    <div ui-view></div>
 
       09</body>
 
       10</html>
 
       11<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
 
       12<script type="text/javascript" src="http://www.zymseo.com/js/angular-ui-router.js"></script>
 
       13<script type="text/javascript">
 
       14    var m = angular.module('app', ['ui.router']);
 
       15    m.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
 
       16        $urlRouterProvider.otherwise('/index');
 
       17        $stateProvider.state('index', {
 
       18            url : '/index',
 
       19            templateUrl : './index.html',
 
       20            controller : 'ctr1'
 
       21        })
 
       22        .state('index.news', {
 
       23            url : '/news',
 
       24            templateUrl : './news.html',
 
       25            controller : 'ctr2',
 
       26        })
 
       27        .state('login', {
 
       28            url : '/login',
 
       29            parent : 'index',
 
       30            templateUrl : './login.html',
 
       31            controller : 'ctr3'
 
       32        })
 
       33    }]);
 
       34    m.controller('ctr1', ['$scope', function($scope){
 
       35        $scope.name = 'index.html';
 
       36    }]);
 
       37    m.controller('ctr2', ['$scope', function($scope){
 
       38        $scope.name = 'news.html';
 
       39    }]);
 
       40    m.controller('ctr3', ['$scope', function($scope){
 
       41        $scope.name = 'login.html';
 
       42    }])
 
       43</script>

index.html中的代码：

 
       1<div class="nav">
 
       2    <a ui-sref="index">首页</a>
 
       3    <a ui-sref="index.news">新闻</a>
 
       4    <a ui-sref="login">登录</a>
 
       5    <div ui-view></div>
 
       6</div>