如何使用 ui-router 仅在某些页面上附加导航栏? [英] How to attach navbar only on certain pages using ui-router?

查看：19
本文介绍了如何使用 ui-router 仅在某些页面上附加导航栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在除登陆页面之外的每个页面上显示导航栏，以便不必在每个需要的页面上附加导航栏文件?现在我已经在主应用程序布局中包含了导航栏，应该如何处理它以使其保持干燥?

演示(每个页面都有导航栏):

var App = angular.module('app', ['ui.router']);App.config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('家', {网址:'/家'，模板网址:'home.html'}).state('关于', {网址:'/关于'，templateUrl: 'about.html'}).state('登陆页面', {url: '/登陆页面',templateUrl: '登陆页面.html'});$urlRouterProvider.otherwise('/home');});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><div ng-app="app"><div ng-include="'navbar.html'"></div><div class="容器"><div ui-view></div>

<script type="text/ng-template" id="navbar.html"><nav class="navbar navbar-inverse" role="navigation"><div class="navbar-header"><a class="navbar-brand" ui-sref="landingpage">LandingPage</a>

<ul class="nav navbar-nav"><li><a ui-sref="home">Home</a></li><li><a ui-sref="about">关于</a></li><li ng-hide="signedIn()"><a href="/login">登录</a></li><li ng-show="signedIn()"><a ng-click="logout()">注销</a></li></nav><script type="text/ng-template" id="home.html"><h1>温馨页面</h1><script type="text/ng-template" id="about.html"><h1>关于页面</h1><script type="text/ng-template" id="landingpage.html"><h1>着陆页</h1><a ui-sref="home">家</a>

解决方案

创建命名视图如

</div> 并设置 templateUrl按状态查看.对于 landingpage 状态，只需不要为 nav 视图提供 templateUrl，它就不会呈现导航栏.

更新:隐藏在 landingpage 而不是 home 状态.

var App = angular.module('app', ['ui.router']);App.config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('家', {网址:'/家'，意见:{导航:{templateUrl: 'navbar.html'},内容: {模板网址:'home.html'}}}).state('关于', {网址:'/关于'，意见:{导航:{templateUrl: 'navbar.html'},内容: {templateUrl: 'about.html'}}}).state('登陆页面', {url: '/登陆页面',意见:{内容: {templateUrl: '登陆页面.html'}}});$urlRouterProvider.otherwise('/home');});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><div ng-app="app"><div ui-view name="nav"></div><div class="容器"><div ui-view name="content"></div>

<script type="text/ng-template" id="navbar.html"><nav class="navbar navbar-inverse" role="navigation"><div class="navbar-header"><a class="navbar-brand" ui-sref="landingpage">LandingPage</a>

<ul class="nav navbar-nav"><li><a ui-sref="home">Home</a></li><li><a ui-sref="about">关于</a></li><li ng-hide="signedIn()"><a href="/login">登录</a></li><li ng-show="signedIn()"><a ng-click="logout()">注销</a></li></nav><script type="text/ng-template" id="home.html"><h1>温馨页面</h1><script type="text/ng-template" id="about.html"><h1>关于页面</h1><script type="text/ng-template" id="landingpage.html"><h1>着陆页</h1><a ui-sref="home">家</a>

How to display a navbar on every page except landingpage, so that not have to attach a navbar file on each of needed pages? Now I have enclosed navbar on main app layout, how it should be handled to keep it DRY?

Demo (with navbar on each page):

var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html'
    })
    .state('about', {
      url: '/about',
      templateUrl: 'about.html'
    }).state('landingpage', {
      url: '/landingpage',
      templateUrl: 'landingpage.html'
    });
  $urlRouterProvider.otherwise('/home');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div ng-app="app">
  <div ng-include="'navbar.html'"></div>

  <div class="container">
    <div ui-view></div>
  </div>

  <script type="text/ng-template" id="navbar.html">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
        <li ng-hide="signedIn()"><a href="/login">Log In</a></li>
        <li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
      </ul>
    </nav>
  </script>

  <script type="text/ng-template" id="home.html">
    <h1>The Homey Page</h1>
  </script>

  <script type="text/ng-template" id="about.html">
    <h1>The About Page</h1>
  </script>

  <script type="text/ng-template" id="landingpage.html">
    <h1>Landing Page</h1>
    <a ui-sref="home">Home</a>
  </script>
</div>

解决方案

Created named views like <div ui-view name="nav"></div> and set the templateUrl by view by state. For the landingpage state, just don't provide a templateUrl for the nav view and it won't render the navbar.

Update: hide on landingpage not home state.

var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      views: {
        nav: {
          templateUrl: 'navbar.html'
        },
        content: {
          templateUrl: 'home.html'
        }
      }
    })
    .state('about', {
      url: '/about',
      views: {
        nav: {
          templateUrl: 'navbar.html'
        },
        content: {
          templateUrl: 'about.html'
        }
      } 
    }).state('landingpage', {
      url: '/landingpage',
      views: {
        content: {
          templateUrl: 'landingpage.html'
        }
      } 
    });
  $urlRouterProvider.otherwise('/home');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div ng-app="app">
  <div ui-view name="nav"></div>

  <div class="container">
    <div ui-view name="content"></div>
  </div>

  <script type="text/ng-template" id="navbar.html">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
        <li ng-hide="signedIn()"><a href="/login">Log In</a></li>
        <li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
      </ul>
    </nav>
  </script>

  <script type="text/ng-template" id="home.html">
    <h1>The Homey Page</h1>
  </script>

  <script type="text/ng-template" id="about.html">
    <h1>The About Page</h1>
  </script>

  <script type="text/ng-template" id="landingpage.html">
    <h1>Landing Page</h1>
    <a ui-sref="home">Home</a>
  </script>
</div>

这篇关于如何使用 ui-router 仅在某些页面上附加导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆