SOLVED - SideMenu, Splash page and Login page...How?

1

Hi,

I’ve create a skeleton where I need a login/intro page and after click , I go to sidemenu page.
In index.html, I’ve only and into menu I’ve into .

So, if I create app.login state like app.login1 state, my app don’t work because I’ve a blank page and there are any error into console. If I use app.login state as I write here , I see the form page but I think that is not the right procedure that form is into . ( I tried and bad works ).

How solve?

This is my state.

// 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 attribute in index.html)
// the 2nd parameter is an array of ‘requires’
// ‘starter.controllers’ is found in controllers.js
angular.module(‘starter’, [‘ionic’, ‘starter.controllers’,‘LocalStorageModule’])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: 'AppCtrl'
})

.state(‘splash’, {
url: ‘/’,
templateUrl: ‘templates/splash.html’,
controller: ‘SplashCtrl’
})

.state(‘app.login1’, {
url: ‘/login1’,
templateUrl: ‘templates/login1.html’,
controller: ‘LoginCtrl’
})

.state(‘app.login’, {
url: “/login”,
views: {
‘menuContent’ :{
templateUrl: “templates/login.html”,
controller: ‘LoginCtrl’
}
}
})

.state('app.search', {
  url: "/search",
  views: {
    'menuContent' :{
      templateUrl: "templates/search.html"
    }
  }
})

.state('app.browse', {
  url: "/browse",
  views: {
    'menuContent' :{
      templateUrl: "templates/browse.html"
    }
  }
})
.state('app.playlists', {
  url: "/playlists",
  views: {
    'menuContent' :{
      templateUrl: "templates/playlists.html",
      controller: 'PlaylistsCtrl'
    }
  }
})

.state('app.single', {
  url: "/playlists/:playlistId",
  views: {
    'menuContent' :{
      templateUrl: "templates/playlist.html",
      controller: 'PlaylistCtrl'
    }
  }
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(‘/app/login’);
});

2

Can you post a demo of this? Its kind of hard to figure out the issue without all the pieces.

3

It’s a bit difficult to put on Pencil because I’ve modularized controller and so on. I can put on a my web server if can be good.

4

Sign in page then tabs,
I think its easy to make a sign in page then side menu based off this example

if you’re developing an app it would be better to use native ones

I won’t recommend using splash screens,

If you’re really want something like that may I suggest you to use

http://ionicframework.com/docs/api/service/$ionicLoading/

Use templateUrl to load html content

5

Hi, What Do you says with native ones? I wish develop hybrid app and not pure native because I need app for Android / IOS / Win.

6

I use templateUrl but my problem is: Why login page is blank if load into main nav-view?

7

I started from that :wink:

8

This is my Codepen : http://codepen.io/redconsulting/pen/uxoif

9

10

If you just need to show a splash screen after you login, why not use cordova’s splash screen plugin? This way, after you login, you can show your splash screen for a bit then hide it again,

http://plugins.cordova.io/#/package/org.apache.cordova.splashscreen

11

Ok, but, now, my problem is that I don’t see the login page before main module. Why? I don’t understand why.

12

Well in the case of your codepen, you don’t have a state where the url is /login.

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/login');

This url doesn’t exist so there nothing to show :smile:

13

Strange…

      .state('app.login', {
      url: "/login",
      templateUrl: "login.html",
      controller: 'LoginCtrl'
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');

I correct with code above, but I’ve always the white page.

1 Like
14

A little off in you formatting, you should read up on UI-router a bit more.

You were setting your url to app/login, but it only needed to be login, as it would inherit the app/ from the abstract state.

  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "menu.html",
    controller: 'AppCtrl'
  })



  .state('app.login', {
    url: "/login",
    views: {
      'menuContent' :{
        templateUrl: "login.html"
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('app/login');

})
15

UHm…thank you…

FYI, I tried with

    .state('login', {
      url: "/login",
      templateUrl: "login.html",
      controller: 'LoginCtrl'
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');

and works.
How remove back button because I don’t go back to login from SideMenu?

16

Yes but you didn’t specify your views option. It needs to know where to render itself.

To hide the back button, you this in your ion-view

<ion-view hide-back-button="true"></ion-view>
17

http://ionicframework.com/docs/api/directive/navClear/

I pretty much always end up using nav-clear and menu-close in all my side menu options.

18

Ok. Thx. It Works.
I put nav-clear on button.

<button nav-clear class="button button-block button-positive" ng-click="LogIn(user)">
              Sign-In
</button>
1 Like