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.


#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>