I am using ionic, and i have a with in it, and im using to navigate between my views.
this is my app.js:
var app = angular.module('myApp', ['ionic', 'ui.router']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
// Sign in - Initial display
$stateProvider.state('sign_in', {
url: '/signIn',
templateUrl: 'html/signIn.html',
controller: 'signInController'
})
.state('sign_up', {
url: '/signUp',
templateUrl: 'html/signUp.html',
controller: 'signUpController'
});
$urlRouterProvider.otherwise('/signIn');
});
My default view is '/signIn'. when i navigate to '/signUp' everything is fine. But when i use the back button to go back to '/signIn' the content of the '/signIn' view appears for a milisec and then disappears and i get blank page.
Some conclutions:
I can see the elements borders in the developer tools.
It happens only when i navigate to a view that was already loaded.
When i resize the browser in any kind of way (minimize, changing
device, resolution etc...) the view appears as it should.
It also happens when i use 'state.go(/signIn)' to navigate back to the
'/signIn' page.
Please help me im really lost with this thing...
btw, is this the 'white screen of death'?
Related
I have this routing on my webpage:
app.config(function($routeProvider)
{
$routeProvider
.when("/",
{
//
})
.when("/DokumentRoute",
{
templateUrl : "static/routes/dokument.html",
controller : "dokumentController"
})
.when("/MarkningarRoute",
{
templateUrl : "static/routes/markning.html",
controller: "markningarController"
})
.otherwise(
{
templateUrl: "static/routes/pageNotFound.html",
controller : "pageNotFoundController"
});
});
When I refresh the page (F5) I want to cancel the routing, meaning I don't want to show anything within the ng-view tag
<div ng-view id="view"></div>
This is what happens now:
When I start the web page it shows no routing-page. I click on "dokument" and it routes to the dokument page, which shows in the ng-view tag.
When I hit F5 the page refreshes, but it STILL SHOWS the dokument route!
This is what I want:
I want the routing to cleared. I want the web site to look like when I first entered it. (nothing showing in the ng-view tag)
How can I fix this?
If anyone is interested, this is how I solved it:
app.run(function ($location, $rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
});
I have a modular application where i have routes split into multiple files.
So my system is.
Top
--Main.Module.js
--Main.Routes.js
--Main.Controllers.js
--Main.html
--user (folder)
----User.Module.js
----User.Routes.js
----User.Controllers.js
And in the user folder I have a login folder with a Login.html and a register folder with a Register.html
The main module file looks like this
angular.module('Main', ['ionic', 'Main.Routes', 'Main.Controllers', "User"])
.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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
The main route file contains
angular.module('Main.Routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Loader', {
url: '/',
templateUrl: '/views/Main.html',
controller: 'MainController'
});
$urlRouterProvider.otherwise('/');
});
And the Main.Module.js injects these two things as well as the User module which js file looks like this
angular.module('User', ['User.Controllers', 'User.Services', 'User.Routes']);
The user routes file has the routes for the login page and the register page
angular.module('User.Routes', [])
.config(function($stateProvider) {
$stateProvider
.state('Login', {
url: '/user/login',
templateUrl: 'views/user/login/Login.html',
controller: 'LoginController'
})
.state('Register', {
url: '/user/register',
templateUrl: 'views/user/register/Register.html'
});
// if none of the above states are matched, use this as the fallback
});
And when I do $state.go("Login") from the main controller it takes me to the login page without any issue. But I have a register button on the login page which is associated with this block of code
//Move user to the register page
$scope.registerClick = function(){
$state.go("Register");
}
Which redirects me to the register page for around half a second then immediately kick it back over to the main html page. So my question is i need to know why the state isnt staying with the register page and is moving immediately to the main.html page. The register page is part of the page history stack because i can go "back" to it with either the hardware back button or pressing back on chrome during testing. I tried moving the routes back to the main route file and not injecting the user routes but it produced the same results.
==============EDIT=============
Once the application loads, if i change the page it goes to after the main page to the register page and add a link back to the login page this behavior does not occur. I'm just confused on whats different.
set an otherwise
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/defaultpage');
.state('login', {
url: '/login',
templateUrl: 'templates/template.html',
controller: 'Ctrl'
})
.otherstates etc....
});
I see what I did wrong. In the location where I had my button that was supposed to take me to the register page alongside the ng-click directive i also had a href directive set to #. Thank you all for your input though.
The offending line
Create an account
What it should have been
Create an account
I have angularjs route with the following definition:
moduleA.config(function($routeProvider){
$routeProvider.
when('/A',{templateUrl:'A.jsp'}).
when('/B',{templateUrl:'B.jsp'}).
when('/C',{templateUrl:'C.jsp'}).
otherwise({
redirectTo: '/',
templateUrl: 'A.jsp'
});
});
Now, let say I click on something and it is redirected to #/C/ view. After refreshing the page, it is redirecting to view C and not to the default view.
I have to show default page after every page refresh happens.
I thought of changing the url to base url while refreshing the page, so that it can be redirected to default page. I am looking for better alternative for this through Angularjs way.
Thanks in advance.
Try this:
In the app.run() block inject 'window' and $location dependency and add:
window.onbeforeunload = function () {
$location.path('/');
};
Like #maurycy commented, If you want user to go to default page anytime a user he's comming to your application, you don't need the event.
just:
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
in your app.run() function.
It should work
I built a simple application that has a home page, a login page and a contacts page, based on the Ionic example on Codepen. My application is here. Login controller sets a $rootScope.user variable when we log in:
.controller('LoginCtrl', function($scope, $rootScope, $state) {
$scope.login = function(){
$rootScope.user = {name:"lyman"};
$state.go("tabs.contact");
};
})
After login we correctly get redirected to the Contacts screen, Contacts tab is shown and highlighted. Now click on the Home tab. Expected behavior: I should see the Home page saying I'm logged in. What I get: the title changes to Home, Home tab is highlighted, but the view changes to templates/login.html template! You can still navigate to Contacts, log out from there, and then navigation stops working altogether. What am I missing?
Another oddity is that ng-show and ng-hide directives are being completely ignored when trying to hide and show tabs, only ng-if works. I'm thinking maybe the issue is because I'm using ng-if to insert and remove tabs from the markup and with ion-nav-view residing inside of the ion-tab tab? What would be the workaround?
So, yes, using ng-if to hide/show tabs will screw up navigation. The solution is to use the tab's hidden property as demonstrated in this fork of my original example:
<ion-tab title="Log In" icon="ion-ios-person" ui-sref="tabs.login" hidden="{{ loggedIn() }}">
<ion-nav-view name="login-tab"></ion-nav-view>
</ion-tab>
Controller:
.controller('TabsCtrl', function($scope, $rootScope) {
$scope.loggedIn = function() {
if ($rootScope.user) {
return true;
}
return false;
};
})
My application has several 'modal' windows, For now there is no specific route to reach an open modal directly. I mean, written the url directly in the browser.
There are a Jquery solution, but how implement some similar solution for angular? where placed? when should run?
You can perform this sort of task within the routing config of your app.
For example, this one is using ui-router, for the routes, and ui-bootstrap for the modals.
In the route config add an onEnter which will fire when the route is first entered.
.state('login', {
onEnter: function ($stateParams, $state, $modal) {
$modal.open({
keyboard: false, // prevents escape-key closing modal
backdrop: 'static', // prevents closing modal outside of the modal
templateUrl: '/views/login', // view to load
controller: 'LoginCtrl' // controller to handle
})
}
})
Now, when navigating to the, in this example, login page the route will open the modal for me.