How to put side menus on Ionic?

Asked

Viewed 2,282 times

7

I’m developing an application on ionic I’m not getting the side menus left the first page of the application and a login I’m not getting the side menus on the page home.html which is for this page the user will when successfully logged in.

home html.

<ion-header-bar class="bar-color_header">
    <button style="color: #ffffff;" menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    <div class="title" style="color: #ffffff;">Home</div>
</ion-header-bar>
<ion-content>
    <div class="row">
        <div class="col">
            <h5>Encontre o que procura em SabeOnde</h5>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_comer">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-cutlery fa-2x"></i></div>
                        Comer
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_dormir">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-bed fa-2x"></i></div>
                        Dormir
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_comprar">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-shopping-cart fa-2x"></i></div>
                        Comprar
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_servicos">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-wrench fa-2x"></i></div>
                        Serviços
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_bares">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-glass fa-2x"></i></div>
                        Bares
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_lazer">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-university fa-2x"></i></div>
                        Lazer
                    </div>
                </div>
            </a>
        </div>
    </div>
</ion-content>

app js.

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a   <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('menu', {
            url: "/menu",
            templateUrl: "templates/menu.html"
        })
        .state('login', {
            url: '/login',
            templateUrl: 'templates/login.html'
        })
        .state('entrar', {
            url: '/entrar',
            templateUrl: 'templates/entrar.html'
        })
        .state('registo', {
            url: '/registo',
            templateUrl: 'templates/registo.html'
        })
        .state('recuperar-password', {
            url: '/recuperar-password',
            templateUrl: 'templates/recuperar-password.html'
        })
        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html'
        })
    $urlRouterProvider.otherwise("/login");
})
ionic

2 answers

1

Then in that case you can replace href by ng-click type.:

//HTML
<a ng-click="irPara()">Ir para</a>
//Coloca isso em sua controller 
$scope.irPara= function () {
            $state.go('nome da rota');
 }

Remembering that this example is based on the following frameworks:
Angular JS
Ionic Framework
Require JS

Research on Require JS will see how everything gets easier!

1

From what I could understand you are not able to put the side menu left. well if this is it even I understood your solution would be something like:

<ion-side-menus>
  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>

</ion-side-menus>

And then to open/close the menu:

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

Reference: Directive - ionSideMenus

Browser other questions tagged ionic

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