angular-单页面多行数据展示-自定义命名-ui-view

来源:互联网 发布:python turtle 坐标 编辑:程序博客网 时间:2024/06/16 03:41
<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
    <script src="js/lib/ui0.4.2/angular-ui-router.js"></script>
    <!--
        指令:ui-view
            该指令主要用于进行目标视图模板的展示
        链接:ui-sref
            该属性,主要用于替换HTML中a标签的href属性,用于指定目标路由的名称
        服务:$stateProvider
            该服务主要用于进行路由状态的定义~ 路由URL和视图模板的绑定
    -->

    <style>
        .active {
            font-size: 18px;
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
    <li><a ui-sref="world" ui-sref-active="active">world</a></li>
</ul>
<div>
    <!--<ui-view></ui-view>    
另一种写法-->
    <ui-view name="header"></ui-view>
    <div ui-view></div>
    <ui-view name="footer"></ui-view>


</div>
<script>
    var app = angular.module("myApp", ["ui.router"]);
    /* 配置路由信息 */
    /*
     $stateProvider: Ui路由中的状态服务提供者
     */

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


            $urlRouterProvider.otherwise("/hello");


            $stateProvider.state({
                name: "hello", /* 状态名称,用于链接中使用 */
                url: "/hello", /* 显示路径,在url地址中显示*/
                views:{
                    "":{
                        template:"<h1>默认路由中显示的内容</h1>"
                    },
                    "header":{
                        template:"<h2>这是hello页面的头部内容</h2>"
                    },
                    "footer":{
                        template:"<h2>这是hello页面的页面底部内容</h2>"
                    }
                }
            }).state({
                name: "world",
                url: "/world",
                views:{/*用于进行多数据展示的情况下*/
                    "":{
                        template:"<h1>这是默认路由ui-view中展示的内容</h1>"
                    },
                    "header":{
                        template:"<h1>这是world链接,展示在header中的内容</h1>"
                    },
                    "footer":{
                        template:"<h1>这是world链接,footer</h1>"
                    }
                }
            });
        }]);
</script>
</body>
</html>
0 0
原创粉丝点击