1

Olá, Estou montando um pequeno projeto para aprendizado e estou tentando utilizar o uiRouter, mas estou tendo dificuldades para reproduzir o que tenho em mente.

Estrutura:

meuApp
|-css
|-img
|-js
|\-app.js
||-config.js
|-lib
|\-angular
|-views
|\-dashboard.html
||-home.html
||-login.html
||-menu.html
|-index.html

Criei um menu.html e quero que ele apareça em diversas páginas, porém não quero que ele apareça na minha home.html(landingpage) e no login.html, como eu faço isso? Abaixo o que tentei fazer mas não funcionou, nem aparece o conteudo do menu.html

menu.html

<md-toolbar class="md-hue-2">
    <div class="md-toolbar-tools">
    <md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
        <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
    </md-button>
    <h2>
        <span>Toolbar with Disabled/Enabled Icon Buttons</span>
    </h2>
    <span flex></span>
    <md-button class="md-icon-button" aria-label="Favorite">
        <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
    </md-button>
    <md-button class="md-icon-button" aria-label="More">
        <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
    </md-button>
    </div>
</md-toolbar>

dashboard.html

<div ui-view="menu"></div> <----- menu.html
<h2>DASHBOARD</h2>

<md-button layout-padding ui-sref="404" class="md-raised md-primary md-hue-2" aria-label="utilizar versão web">
    404
</md-button>

<md-button layout-padding ui-sref="contato" class="md-raised md-primary md-hue-2" aria-label="utilizar versão web">
    contato
</md-button>

<md-button layout-padding ui-sref="cadastrar" class="md-raised md-primary md-hue-2" aria-label="utilizar versão web">
    cadastrar
</md-button>

<md-button layout-padding ui-sref="cadastrar" class="md-raised md-primary md-hue-2" aria-label="utilizar versão web">
    Logar
</md-button>

config.js

angular.module("app").config(function($stateProvider, $urlRouterProvider, $locationProvider, $mdThemingProvider){

     // remove o "#" da url
    $locationProvider.html5Mode(true).hashPrefix('!');

    $stateProvider

    .state('index',{
        url: '/',
        templateUrl: '/views/home.html'
    })
    .state('menu',{
        templateUrl: '/view/menu.html' <--- estou tentando pegar o menu.html
    })
    .state('dashboard',{
        url: '/dashboard',
        templateUrl: '/views/dashboard.html'
    })
    .state('404',{
        url: '/404',
        templateUrl: '/views/404.html'
    })
    .state('contato',{
        url: '/contato',
        templateUrl: '/views/contato.html'    
    })
    .state('cadastrar',{
        url: '/cadastrar',
        templateUrl: '/views/cadastrar.html'
    })
    .state('login',{
        url: '/login',
        templateUrl: '/views/login.html'    
    });

    $urlRouterProvider.otherwise('/404');
});

1 Resposta 1

0

Duas possibilidades:

  1. Aplique o menu e barra lateral apenas a subrotas de uma determinada rota - no exemplo abaixo, modulo:

    • 404
    • login
    • modulo
      • contato
      • cadastrar
  2. Controle a visualização das duas seções via ng-if ou ng-show baseado no estado atual. Exemplo:


<div id="menu" ng-if="state.current.name !== 'login'">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .