How to put side menus on ionic?

Question

How to put side menus on ionic?

Navigation

#1 by (1 votes)
#2 by (1 votes)

7

I'm developing an application in ionic I'm not able to put side menus left on the first page of the application and a login I'm not able to do the side menus on page home.html which is for that page which goes to the user when they have 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

asked by anonymous 08.07.2015 / 23:12

2 answers

Generate header when exporting data to excel Why use "git branch --unset-upstream"?

score 1 · Answer 1

So in this case you can replace the href with the 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:
Angle JS
Ionic Framework
Require JS

Weighing on Require JS will see how things get easier!

score 1 · Answer 2

From what I can understand you can not put the left menu side. good if this is what 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