Multiple views with uiRouter

Asked

Viewed 60 times

1

Hello, I’m putting together a small project for learning and I’m trying to use uiRouter, but I’m having a hard time 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.html menu and I want it to appear on several pages, but I don’t want it to appear in my home.html(landingpage) and login.html, how do I do that? Below what I tried to do but it did not work, nor does the contents of the menu appear.html

html menu.

<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');
});
html angularjs ui-router

1 answer

0

Two possibilities:

  1. Apply the menu and sidebar only to subroutes of a given route - in the example below, modulo:

    • 404
    • login
    • module
      • contact
      • register

  2. Control the visualization 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'">

Browser other questions tagged html angularjs ui-router

You are not signed in. Login or sign up in order to post.