angular-ui-router 多视图views

angular-ui-router API

UI Router 中有三种方式激活一个路由:
(1)$state.go():优先级较高的便利方式
(2)ui-sref:点击包含此指令跳转
(3)url:url导航

一、$state.go()

(1)$state.go(to [, toParams] [, options])
参数:
to:绝对“state名称”或者相对的“state路径”(如果路径,以“^或者.”是相对,否则为绝对)
toParams:发送给state的数据参数,由$stateParams构建
options:{ location: true, inherit: true, relative: $state.$current, notify: true }
(2)$state.transitionTo(to, toParams [, options])
$state.go() 内部调用此方法
(3)$state.reload()
(4)$state.includes(stateName [, params]) stateName是否为当前路由的一部分
(5)$state.is(stateOrName [, params]) stateOrName是否为当前路由(完全匹配)
注意:contact.details.item === contactDetailsItem
(6)$state.href(stateOrName [, params] [, options])
(7)$state.get([stateName])
(8)$state.current

参考地址:https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto–toparams–options

二、ui-sref

此指令必须绑定到<a>标签,如果该路由有对应的关联URL,其通过$state.href()自动生成和更新href属性。

<a ui-sref="home">Home</a> | <a ui-sref="about">About</a>

(1)ui-sref-active=”active” 该路由激活,则对应增加active样式名称

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
</ul>

当路由是“pp.user”,且包含参数user值为’bilbobaggins’,会变成如下

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li>
</ul>

(2)ui-sref-opts 传递参数

<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

参考地址:https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

三、URL Routing

$stateProvider
    .state('contacts', {
        url: "/contacts",
        templateUrl: 'contacts.html'
    })

其支持正则、查询参数

(1)$urlRouterProvider.when()
(2)$urlRouterProvider.otherwse()
(3)$urlRouterProvider.rule()

var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/', '/index');
    $urlRouterProvider.otherwise('/index');
});

参考地址:https://github.com/angular-ui/ui-router/wiki/URL-Routing

四、示例(多视图:页面可以显示多个动态变化的不同区块)

// Node静态服务
var http = require("http");
var express = require("express");
var serveStatic = require('serve-static');

var app = new express();

app.use(serveStatic(__dirname + '/'));
app.get("/", function(req, res) {
    res.sendFile(__dirname + "/Main2.html");
})
app.listen(1337, "localhost");
<!-- Main2.html -->
<!DOCTYPE html>
<head>
    <title></title>
    <script src="./angular.js"></script>
    <script src="./angular-ui-router.js"></script>
    <script src="./App2.js"></script>

</head>
<body data-ng-app="myApp">
    <h1>多ui-view</h1>
    <div ui-view></div>
    <div ui-view="chart"></div> 
    <div ui-view="data"></div> 
</body>
<html>
// App2.js
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/home");
    $stateProvider.state("home", {
            url: "/home",
            views: {
                "": {
                    template: "<h1>HELLO!</h1>"
                },
                "chart": {
                    template: "chart"
                },
                "data": {
                    template: "data"
                }
            }
        })
        .state("index", {
            url: "/index",
            views: {
                "": {
                    template: "<h1>HELLO!</h1>"
                },
                "data": {
                    template: "data-index"
                }
            }
        })   
});

五、示例(嵌套视图:页面某个动态变化区块中,嵌套着另一个可以动态变化的区块)

// Node静态服务
var http = require("http");
var express = require("express");
var serveStatic = require('serve-static');

var app = new express();

app.use(serveStatic(__dirname + '/'));
app.get("/", function(req, res) {
    res.sendFile(__dirname + "/Main.html");
})
app.listen(1337, "localhost");
<!-- Main.html -->
<!DOCTYPE html>
<head>
    <title></title>
    <script src="./angular.js"></script>
    <script src="./angular-ui-router.js"></script>
    <script src="./App.js"></script>

</head>
<body data-ng-app="myApp">
    <h1>AngularJS Home Page (Ui-router Demonstration)</h1>
    <div ui-view></div>
</body>
<html>
// App.js
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.when("", "/PageTab");
     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});
<!-- PageTab.html -->
<div>
     <div>
         <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
         <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
         <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
     </div>
     <div>
          <div ui-view/>
     </div>

</div>

<!-- Page1.html -->
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

<!-- Page2.html -->
<div>
     <div>
         <h1>Page 2 content goes here...</h1>
     </div>
</div>

<!-- Page3.html -->
<div>
     <div>
         <h1>Page 3 content goes here...</h1>
     </div>
</div>
奋飛 CSDN认证博客专家 技术管理 前端工程化
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页