md-navbar ui-router

最新推荐文章于 2022-06-18 17:52:04 发布

yaoyuan-yy

最新推荐文章于 2022-06-18 17:52:04 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/YYecust/article/details/52151041

版权

以下代码可以使用
angular-material的navbar
https://material.angularjs.org/latest/demo/navBar
同时使用ui-router
https://angular-ui.github.io/ui-router/site/#/api/ui.router
改变路由
需要引入相关的库，并在相同目录下有
1.html. 2.html. 3.html

<!doctype html>
<html ng-app="myApp">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
</head>
<body ng-cloak>
    <md-content class="md-padding">
        <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
            <md-nav-item md-nav-sref="1" name="page1">1</md-nav-item>
            <md-nav-item md-nav-sref="2" name="page2">2</md-nav-item>
            <md-nav-item md-nav-sref="3" name="page3">3</md-nav-item>
        </md-nav-bar>
        <ui-view></ui-view>
    </md-content>
    <script src="../node_modules/angular/angular.js"></script>
    <script src="../node_modules/angular-material/angular-material.js"></script>
    <script src="../node_modules/angular-aria/angular-aria.js"></script>
    <script src="../node_modules/angular-animate/angular-animate.js"></script>
    <script src="../node_modules/angular-ui-router/release/angular-ui-router.js"></script>
    <script>
        angular.module('myApp', ['ngMaterial', 'ui.router'])
                .config(function ($stateProvider) {
                    $stateProvider
                            .state('1', {
                                url: '/1',
                                templateUrl: '1.html'
                            })
                            .state('2', {
                                url: '/2',
                                templateUrl: '2.html'
                            })
                            .state('3', {
                                url: '/3',
                                templateUrl: '3.html'
                            })
                });
    </script>
</body>
</html>