Multiple views with uiRouter

1

Hello, I'm setting up a small project for learning and I'm trying to use uiRouter, but I'm having trouble reproducing what I have in mind.

Structure:

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

I created a menu.html and I want it to appear on several pages, but I do not want it to appear on my home.html (landingpage) and login.html, how do I do it? Below what I tried to do but did not work, nor does the menu content appear.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');
});
    
asked by anonymous 25.06.2016 / 17:55

1 answer

0

Two possibilities:

  • Apply the menu and sidebar only to the subroutines of a given route - in the example below, modulo :

    • 404
    • login
    • module
      • contact
      • sign up
  • Control the display of the two sections via ng-if or ng-show based on the current state. Example:

  • <div id="menu" ng-if="state.current.name !== 'login'">
    
        
    27.06.2016 / 15:00