Side menu + tabs + login

am working on ionic apps, my index.html include the side menu part and the tabs injected through the .config to for other pages, i need to add a login page at the application start, the login page should show no side menu and no tabs …onlu login form, and on login success the app should redirect to the home page and side menu , tabs must be activated , i tried to us the ng-if within the side menu item in the index.html but it didnt work, i set a $rootScope for the login status and use it as a flag for the side menu to show or not, but when i redirected to the home page , the side menu still not active. any tips for this ??

make index an empty shell with an ui-view element to load a template, now you have to do a few ui-routes, the login one to include your login template, an abstract main route to load your app main layout template (where you have your side menu and content placeholder view) and the actual routes for your content, then you should only worry about the login, the rest should work as it is no extra care.

@sonicd300 any codepen sample ?

index.html

...
<body>
<div ui-view></div>
</body>
...

routes

$stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'components/login/login.html',
        controller: 'LoginController'
      })
      .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: 'app/main/main.html'
      })
      .state('tab.settings', {
        url: '/settings'
        templateUrl: 'app/components/settings.html'
      })

main.html

<ion-nav-bar class="bar bar-header bar-positive">
  <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

<ion-pane ng-include="'app/main/tabs.html'"></ion-pane>

or whatever you have according to your app

then your own implementation, since you asked for guidance im not gonna give you copy/pasete working code.

Hope this helps, it’s not really hard it’s just basic angularJS workflow, consider it like a simple plain website with login.

thats more than ok, i got the idea now , i will implemented now. thanks

@sonicd300 i tried to use this method but i didnt get it in some point, my index.html is

 <body ng-app="ionicApp" >
    <ion-side-menus >
        <ion-side-menu-content ng-controller="NavCtrl" >
          <ion-nav-bar class="bar-positive">
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>
          </ion-nav-bar>
          <ion-nav-buttons side="left"  >
            <button  class="button button-icon button-clear ion-bag" ng-click="showMenu()">
            </button>
          </ion-nav-buttons>
       
            <button  class="button button-icon button-clear ion-navicon-round" ng-click="showRightMenu()">
            </button>
          </ion-nav-buttons>
          <ion-nav-view animation="slide-left-right"></ion-nav-view>
        </ion-side-menu-content> 
        <ion-side-menu side="left" >
          <ion-header-bar class="bar bar-header bar-dark">
            <h1 class="title">orders</h1>
          </ion-header-bar>
          <ion-content has-header="true">
            <ul class="list">
              <li>
                <a class="item" menu-close nav-clear href="#/tab/test1">test</a>
              </li>
            
            </ul>
          </ion-content>
        </ion-side-menu>
      
          <ion-header-bar class="bar bar-header bar-dark">
            <h1 class="title">قائمة التطبيق</h1>
          </ion-header-bar>
          <ion-content>
            <ul class="list">
              <li>
              <a class="item" menu-close href="#/tab/search">البحث</a>
              </li>
              <li>
                <a class="item" menu-close nav-clear href="#/tab/settings">اعدادات التطبيق</a>
              </li>
            </ul>
          </ion-content>
        </ion-side-menu>
      </ion-side-menus>
  </body>

and i got the tabs as an injected view, how to implement your method if i got a side menu not only nav-bar ?

thanks

well, as i can see your index html looks completely different than the one i showed you…
you have to put the “app layout” in a template, in which you may put your sidebar, because you only want your sidebar usable when somebody logs in, not before…

when the route is login, the empty ui-view in the index.html will only load the login template, then the rest is the default tab interface.

@sonicd300 i did what u advice before. Putting the side menu in a template and ui-view in the index but it didnt work . So i sent u the old index which got the side menu. Can u send me any working sample … like codepen so i compare with my code to see where i miss it. By the way am using ionic ver 14.

thanks

@sonicd300 i put it on codepen so you can see the code am using

See the Pen raRXyz by Firas F. Kudsy (@firaskudsy) on CodePen.

Ok, i can see what’s happening, for some reason you are doing an abstract state that loads the menu, which i think isnt working quite well for you, use tabs.html template and better yet call it layout.html, make it an abstract state and put all layout (tabs shell code and menu) in that template, and should be enough :smile: as i can see in your CP you are almost done, which i strongly recomend is to move away from index.html the template scripts to external files.

@sonicd300 do you mean gatharing tabs and menu in one template and call it layout.html ? i did that before and it didnt work !!? , can you show me how in CP ?

am putting all the template withing the index.html as a script in the CP only, in my apps each templae is in a separate html file.

this is the CP after combining tabs and menu

See the Pen raRXyz by Firas F. Kudsy (@firaskudsy) on CodePen.

many thanks

bro, you have lots of errors in the markup besides you are not reading what i told you to do…

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Side Menu & Tabs Example</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
  </head>

  <body>
<div ui-view></div>
    
    <script id="layout.html" type="text/ng-template">
      <ion-side-menus>
          <ion-side-menu-content>
            <ion-nav-bar class="bar-positive">
              <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
            </ion-nav-bar>
          
            <ion-nav-buttons side="left"  >
              <button  class="button button-icon button-clear ion-bag" ng-click="showMenu()"></button>
            </ion-nav-buttons>
       
            <ion-nav-view animation="slide-left-right"></ion-nav-view>
          </ion-side-menu-content>
          
          <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-dark">
              <h1 class="title">menu 1</h1>
            </ion-header-bar>
            <ion-content has-header="true">
              <ul class="list">
                <li><a class="item" menu-close nav-clear href="#/tab/page1">item 1</a></li>
                <li><a class="item" menu-close href="#/tab/page2">item 2</a></li>         
              </ul>
            </ion-content>
          </ion-side-menu>
        </ion-side-menus>
      <ion-tabs class="tabs-icon-top tabs-dark">
        <ion-tab title="about" icon="ion-ios7-information" ui-sref="app.about">
          <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="contact us" icon="ion-ios7-world" ui-sref="app.contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="main" icon="ion-home" ui-sref="app.home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
      </ion-tabs>
    </script>

    <script id="home.html" type="text/ng-template">
      <ion-view title="My Home page">
         <ion-content id="imagebg" has-header="true" padding="true">
          <h2>My home page</h2>
        </ion-content>
      </ion-view>
    </script>

    <script id="sign-in.html" type="text/ng-template">
      <ion-view title="Sign in" left-buttons="leftButtons" right-buttons="rightButtons">
        <ion-content has-header="true">       
          <div class="list padding">
            <label class="item item-input">
              <input type="text" ng-model="user.username" placeholder="user name">
            </label>
            <label class="item item-input">
              <input type="password" ng-model="user.password" placeholder="password">
            </label>
          </div>
          <div class="padding-horizontal">
            <button class="button button-block button-positive" ng-click="signIn(user)">Sign In         </button>
          </div>
        </ion-content>
      </ion-view>
    </script>

  </body>
</html>
var myionApp = angular.module('ionicApp', ['ionic']);
myionApp.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});
myionApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('signin', {
            url: "/sign-in",
            templateUrl: "sign-in.html",
            controller: 'SignInCtrl'
        })
        .state('tabs', {
            url: "/app",
            abstract: true,
            templateUrl: "layout.html"
        })
        .state('tabs.home', {
            url: "/home",
            views: {
                'home-tab': {
                    templateUrl: "home.html"
                }
            }
        });
    $urlRouterProvider.otherwise("/app/home");
});
myionApp.controller('SignInCtrl', function ($scope, $state) {
    $scope.signIn = function (user) {
        console.log('Sign-In', user);
        $state.go('tabs.home');
    };
});

@sonicd300 am confused now, the code u sent still not showing both side menu and tabs on the home !?

this is the CP

See the Pen raRXyz by Firas F. Kudsy (@firaskudsy) on CodePen.

ok, according to the edits i did in your CP (posted above) i was able to see the homepage (tabs and template) i think your login problem isnt a problem anymore, i’ve seen markup errors, and probably you are not using the directive as it should, what i showed you is a way to simply load a login page isolated from the rest of the app, i think you should spent more time with the code and try to figure it out why isnt working as you expect, i was able to load a login template without the app content, and when i changed the route i was able to see the layout template, how your app works i have no idea, that’s why i can’t do it for you, what i’d like to know is if the login problem that you posted in the first place is solved.

THanks

@sonicd300
thanks for all your time, i will see how to fix this issue, i think am cinfused because alot of search result i found didnt show any method to combine side menu and tabs in one layout, and am on the same point again.

thanks again and sorry if i botherd you

the problem is in the layout template: http://codepen.io/calendee/pen/JdtuG
Check this guy, he put a main view inside the sidemenu content to load the tabs, that’s the only missing part.
Other than that you are ready to go.

:slight_smile:

now i can see it :D, sorry again for all that time, thanks and :beers:

I want to see your app man :slight_smile: glad it works now

@sonicd300 just finish implementing your points and its work :relaxed: so thanks again, hahah and get ready for more issues :wink: