AngularJS學習日記（五）UI-Route

時間 2019-11-16

標籤 angularjs 學習日記 route 欄目 AngularJS 简体版

原文原文鏈接

ui-view替代的是ngroute路由的ng-view。css

<div ui-view></div>
複製代碼

簡單的Demo：html

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .active {
            color: red; font-weight: bold;
        }
    </style>

</head>
<body ng-app="helloworld">
<a ui-sref="hello-world" ui-sref-active="active">hello</a>

<a ui-sref="world" ui-sref-active="active">world</a>

<div ui-view style="margin-left: 50px"></div>

</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/home/home.js"></script>
</html>
複製代碼

angular.module('helloworld', ['ui.router'])

    .config(function($stateProvider){
        $stateProvider.state('hello-world',{
            url:'/hello',
            template:'<h3>hello world!</h3>'
        }).state('world',{
            url:'/world',
            templateUrl:'../resources/static/components/world/world.html'
        }).state('world.world1',{
            url:'/world/world-1',
            template:'<h3>This is a World 1</h3>'
        }).state('world2',{
            url:'/world/world-2',
            template:'<h3>world2並不依賴於world，在咱們點擊它的時候，他會替換掉index.html中的<div ui-view></div></h3>'
        })

    });

複製代碼

先注入了ui.router ，以前我注入的都是ui-router，我特麼還覺得是版本的問題。spring

注意之後，在config對服務進行參數初始化，這裏初始化的是stateProvider。bootstrap

效果圖：springboot

嵌套路由bash

嵌套路由顧名思義就是路由裏面還有一個路由，uiroute能作到ngroute作不到的事情，這就是其中一個。app

index的JS：iview

angular.module('helloworld', ['ui.router'])

    .config(function($stateProvider){
        $stateProvider.state('hello',{
            url:'/hello',
            template:'<h3>hello world!</h3>'
        }).state('world',{
            url:'/world',
            templateUrl:'../resources/static/components/world/world.html'
        }).state('world.world1',{
            url:'/world/world-1',
            template:'<h3>This is a World 1</h3>'
        }).state('world2',{
            url:'/world/world-2',
            template:'<h3>world2並不依賴於world，在咱們點擊它的時候，他會替換掉index.html中的ui view</h3>'
        })

    });

複製代碼

world的HTML：ide

<div>
    <a ui-sref=".world1" ui-sref-active="active">world-1</a>
    <br>
    <a ui-sref="world2" ui-sref-active="active">world-2</a>

    <div ui-view style="margin-left: 50px"></div>
</div>
複製代碼

先看index的JS，world.world1 ，這個.world1就是子路由，同時在world的html裏面，ui-sref裏面也是有帶.的，可是world2是沒有的，因此world2不是子路由，因此當點擊world2的時候，他就會替換掉整個ui -view，而不是ui-view裏面的ui-view（子路由）。ui

子路由：

不是子路由：

ps：template裏面寫這麼亂，是由於我結構就是這麼亂。正確的結構其實我本身也不是很清楚，我這個結構是模仿以前大佬給我看的項目，可是他那個項目是springboot的。個人結構：

經過views實現多視圖

多個示圖時，使用views屬性。該屬性裏包含了哪些ui-view，則對應的template或templateUrl裏的內容就會填充該ui-view。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>經過views實現多視圖</title>
</head>
<body >
    <div ng-app="myApp" >
        <a ui-sref="index">點我顯示index內容</a>
        <div ui-view="header"></div>
        <div ui-view="nav"></div>
        <div ui-view="body"></div>
    </div>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/view/view.js"></script>
</html>
複製代碼

angular.module('myApp', ['ui.router'])
    .config(["$stateProvider",  function ($stateProvider) {
        $stateProvider
            .state("index", {
                url: '/index',
                views:{
                    'header':{template:"<div>頭部內容</div>"},
                    'nav':{template:"<div>菜單內容</div>"},
                    'body':{template:"<div>展現內容</div>"}
                }
        })

}]);

複製代碼

效果圖：

ui view的定位

@的做用是用來絕對定位view，即說明該ui-view屬於哪一個模板。如：’header@index’表示名爲header的view屬於index模板。絕對和相對路徑的效果同樣

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-app="myApp" >
        <a ui-sref="index">show index</a>
        <a ui-sref="index.content1">content111111</a>
        <a ui-sref="index.content2">content222222</a>
        <div ui-view="index"></div>
    </div>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/uiview/uiview.js"></script>
</html>
複製代碼

js：

angular.module('myApp',['ui.router'])

    .config(['$stateProvider',function ($stateProvider) {
        $stateProvider
            .state('index',{
                url:'/index',
                views:{
                    'index':{template:"<div><div ui-view='header'></div><div ui-view='nav'></div> <div ui-view='body'></div></div>"},
                    //這裏必需要絕對定位
                    'header@index':{template:'<div>頭部內容header</div>'},
                    'nav@index':{template:'<div>菜單內容nav</div>'},
                    'body@index':{template:'<div>展現內容contents</div>'}
                }
            })
            //絕對定位
            .state('index.content1',{
                url:'content1',
                views:{
                    'body@index':{template:'<div>content11111111111</div>'}
                }
            })
            //相對定位：該狀態裏的body的ui-view爲相對路徑下的（即沒有說明具體是哪一個模板）
            .state('index.content2',{
                url:'/content2',
                views:{
                    'body':{template:'<div>content2222222222222222222222</div>'}
                }
            })
    }])
複製代碼

效果：

URL路由傳參（經過$stateParams服務獲取參數）

有url: '/index/:id',和url: '/index/{id}',兩種形式傳參：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<body >
    <div ng-app="myApp" >
        <a ui-sref="index({id:30})">show index</a>
        <a ui-sref="test({username:'peter'})">show test</a>
        <div ui-view></div>
    </div>
</body>

</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/stateParams/stateParams.js"></script>
</html>
複製代碼

angular.module('myApp', ['ui.router'])
    .config(["$stateProvider",  function ($stateProvider) {
        $stateProvider
            .state("index", {
                url: '/index/:id',
                template:"<div>indexcontent</div>",
                controller:function($stateParams){
                    alert($stateParams.id)
                }
            })
            .state("test", {
                url: '/test/:username',
                template:"<div>testContent</div>",
                controller:function($stateParams){
                    alert($stateParams.username)
                }
            })

    }]);
複製代碼