Angular路由控制多视图切换

来源：互联网发布：js 控制滚动条位置编辑：程序博客网时间：2024/04/30 00:01

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"}        }    })};

阅读全文

0 0