Angular路由控制多视图切换

最新推荐文章于 2020-11-30 17:21:16 发布

MAXY_

最新推荐文章于 2020-11-30 17:21:16 发布

阅读量1.1k

点赞数

分类专栏： AngularJS 文章标签： angular 多视图

本文链接：https://blog.csdn.net/maxy_/article/details/76806724

版权

AngularJS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Angular路由控制多视图切换

首先由于angular的内置路由功能有限，通常无法满足开法需求，所以在做路由嵌套时通常会引入“angular-ui-router.js”第三方路由模块。

index.html页面如下：（ui-view用来变换视图）

<html>
    <head>
        <script src="~/Scripts/angular.js"></script>
        <script src="~/Scripts/angular-ui-router.js"></script>
        <script src="~/app/scripts/app.js"></script>
    </head>
    <body ng-app="myAPP">
        <div ui-view></div>
    </body>
</html>

<div>
    <a class="btn btn-success col-lg-12" ui-sref ="firstPage">点击切换到first视图</a>
</div>

first.html:

<ul class="nav nav-tabs">
        <li role="presentation" class="active"><a ui-sref="first.firstPage">首页</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">菜单一<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">111</a></li>
                <li><a href="#">222</a></li>
                <li><a href="#">333</a></li>
            </ul>
        </li>
        <li role="presentation"><a href="#">菜单二</a></li>
</ul>

<div ui-view="viewFirst"></div>
<div ui-view="viewMain"></div>

app.js：(多视图之间的切换)

var app = angular.module("myApp", ["ui.router"]);
var config = function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/login");
    $stateProvider
    .state("login", {
        url: "/login",
        templateUrl: "/app/html/login.html"
    }).state("first", {
        url: "/two",
        templateUrl: "/app/html/state2-two.html"
    }).state("first.firstPage", {
        url: "/first/:id",
        view:{/*显示多视图*/
            "viewFirst":{templateUrl: "/app/html/firstPage.html"},
            "viewMain":{templateUrl: "/app/html/mainPage.html"}
        }

    })
};

MAXY_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular路由控制多视图切换

Angular路由控制多视图切换首先由于angular的内置路由功能有限，通常无法满足开法需求，所以在做路由嵌套时通常会引入“angular-ui-router.js”第三方路由模块。index.html页面如下：（ui-view用来变换视图）<html> <head> <script src="~/Scripts/angular.js"></script>
复制链接

扫一扫