I'm new using ionic but I can't make routing correctly
I started using a side menu project, when I tried routing my login page to the main page where the side menu is, the button from the side menu dissapear
I have the next code for routing
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu.maps', {
url: '/page1',
views: {
'side-menu21': {
templateUrl: 'templates/maps.html',
controller: 'mapaCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
controller: 'menuCtrl'
})
.state('login', {
url: '/page10',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
$urlRouterProvider.otherwise('/side-menu21/page1')
});
How can I route the login page to the maps page with the side menu
Related
What am I missing? Why would the Home template NOT load via .otherwise('/')? If I link to href="/#/" or ui-sref="home" everything works fine. However the Home template does NOT load if I try $urlRouterProvider.otherwise is working. The console does not show any errors.
Another interesting point is the URL is never modified when the first page loads. My other apps usually redirect from http://www.domain.com to http://www.domain.com/#/. This app is not showing the updated URL.
I have tried this in multiple browsers. No extensions or plugins are active.
Here are my routes:
(function () {
'use strict';
angular
.module('myapp')
.config(configRoutes);
configRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
function configRoutes ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'app/partials/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'app/partials/signup.html',
})
.state('logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/partials/profile.html',
});
}
})();
I am using Angular UI Router for my Single page application. It is basically report (Grid + charts). When I route from one page to another it is fine. But if I open page and leave it like that for few minutes and again I try to go to another page by clicking link, it is stuck there. Then I have to refresh the page.
This means if the page is left idle for few minutes then the routing is not happening as it should be.
(function () {
var module = angular.module("app", ["ngAnimate", "ui.router", "ui.bootstrap"]);
module.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/error");
$stateProvider
.state('home', {
url: "/",
templateUrl: "partials/index.html",
controller: "indexController",
controllerAs: "ctrl"
})
.state('weather', {
url: "/weather",
templateUrl: "./partials/weather.html",
controller: "weatherController",
controllerAs: "ctrl"
})
.state('error', {
url: "/error",
templateUrl: "/partials/error.html"
})
.state('horizontalBar', {
url: "/horizontalBar",
templateUrl: "./partials/charts/d3/horizontalBar.html",
controller: "horizontalBarController",
controllerAs: "ctrl"
})
.state('lineChart', {
url: "/lineChart",
templateUrl: "./partials/charts/d3/lineChart.html",
controller: "lineChartController",
controllerAs: "ctrl"
});
});
}());
I'm using angular 1.5.2 and angular ui router 0.2.5, i make a page transition, from a state to another state, only the screen changes, but the controller not change, i tried to do the transition by three different ways:
$location.path('/home');
$state.go('home');
$state.transitionTo('home');
the states
appTmw.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider.state('login', {
url: '/login',
controller: 'LoginCtrl',
views: {
'': {
templateUrl: '/components/login/loginview.html'
}
}
})
.state('home', {
url: '/home',
controller: 'HomeCtrl',
views: {
'': {
templateUrl: '/components/home/homeView.html'
},
'nav#home': {
templateUrl: '/assets/partials/cabecalho.html'
},
'rod#home': {
templateUrl: '/assets/partials/rodape.html'
}
}
})
...
The screen change from login to home, but the controller remains the LoginCtrl.
What is wrong with de code?
Currently I'm using states in my Ionic Framework App. When I press the back button to return to a previous state it shows the current state and the state that it should transition to in the same screen.
Error Screen:
Each Individual Screen Looks like this:
Screen 1:
Screen 2:
On transition from Screen 1 back button to Screen 2 the error screen occurs.
In my configuration file the current setup is as such:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.events', {
url: '/events',
views: {
'tab-event': {
templateUrl: 'views/events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.event-detail',{
url:'/events/:eventId',
views: {
'tab-event':{
templateUrl: 'views/event.html',
controller: 'EventDetailsCtrl'
}
}
})
.state('tab.attendees',{
url: '/events/:eventId/attendees/:attendeeIds',
views: {
'tab-event':{
templateUrl: 'views/attendees.html',
controller: 'AttendeesCtrl'
}
}
})
.state('tab.attendee-detail',{
url: '/events/:eventId/attendee/:attendeeId',
views: {
'tab-event':{
templateUrl: 'views/attendee.html',
controller: 'AttendeeDetailCtrl'
}
}
});
$urlRouterProvider.otherwise('/login');
});
When i press the back button From the 'tab.attendees' state back to the 'tab.event-detail' state the error occurs. If it helps I transition from 'tab.event-detail' state to 'tab.attendees' state via anchor tag like so:
<a ng-href="#/tab/events/{{event.id}}/attendees/{{event.attendees}}">See Attendees</a>
What could be causing the screen mix?
I started building ionic app, and I want to change the views, I am not using tag, I have separate file for every view.
The states look like this:
var route = angular.module('route', []);
route.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'home.html',
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html'
})
.state('manage-booking', {
url: '/manage-booking',
templateUrl: 'manage_booking.html'
})
.state('clinic-list', {
url: '/clinic-list',
templateUrl: 'clinic_list.html'
})
$urlRouterProvider.otherwise('/home');
});
When I run the app, the url defaults to '/#/home'
I am not able to figure out why is it not loading the home page. When I change the otherwise to point to '/#/login', everything works.
Remove the abstract: true property (source)