My website has 2 main routes:
/home
/:something
Any request to / should go to /home and this is done by using 'otherwise', anything else that does not match home AND is not empty should go to app.lista. The thing is, app.lista matches / because is like :slug is empty, so otherwise is not being called:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: '/_/common/templates/main.html',
controller: 'main'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
How can I tell the stateProvider to not match app.lista if :slug is empty?
Looks like same issue which is logged Here on github and solution seems to be the use ragular expression
I think changing your slug route to
.state('app.lista', {
url: '/{slag:[^\/]+}',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
Should solve your problem plunker
Make your app route non-abstract and change the template and controller to point to that of app.home. Since it is defined before app.list, '/' will match app route instead.
$stateProvider
.state('app', {
url: '/',
templateUrl: '/_/common/templates/home.html',
controller: 'home'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
Use UI Routers resolve to check if route params are missing.
//Example of a single route
.state('app.lista', {
url: '/:slug',
templateUrl: '----.html',
controller: 'list',
resolve: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.slug=== undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
})
Related
I scaffolded an ionic V1 site using tab template and created the following link in a page.
<a href="#/tab/Test">
Test
</a>
And an empty control for "Test" page.
.controller('TestCtrl', function ($scope) {
})
The following is the router
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
However, when testing using ionic serve, click the link doesn't go to the page. It stays in the page but the URL in the address bar changed to localhost:8100/#/tab/test.
Full router.
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('events', {
url: '/events',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
.state('tab.venues', {
url: '/venues',
views: {
'tab-venues': {
templateUrl: 'templates/tab-venues.html',
controller: 'VenuesCtrl'
}
}
})
// Each tab has its own nav history stack:
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'templates/tab-events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.categories', {
url: '/categories',
views: {
'tab-categories': {
templateUrl: 'templates/tab-categories.html',
controller: 'CategoriesCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Update:
It will works if I change the router to the following. But it will be full screen and the tabs are gone.
.state('test', {
url: '/test',
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
})
and the link href to href="#/privacy".
Change the href url href="#/test'" instead of href="#/tab/Test"
I am using this code
<ion-tab title="" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/test" ng-if="userkey">
<ion-nav-view name="tab-test"></ion-nav-view>
</ion-tab>
if you want to navigate
< ion-nav-view name="tab-test">
and state name sould be same
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
mainApp.config(['$stateProvider', '$routeProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider',
function($stateProvider, $routeProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('page', {
abstract: true,
url: '/newgmr/admin',
views: {
'home': {
template: '<div ui-view="body"></div>'
}
}
}).state('page.login', {
url: '/',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/login.html',
controller: 'loginController'
}
}
})
.state('page.forgotpassword', {
url: '/forgot-password',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/forgotPassword.html',
controller: 'forgotPasswordController'
}
}
})
.state('page.resetpassword', {
url: '/reset',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/resetPage.html',
controller: 'resetPasswordController'
}
}
})
.state('admin.dashboard', {
url: '/dashboard',
views: {
'header#admin': {
templateUrl: 'mainApp/dashboardPage/header.html'
},
'leftPane#admin': {
templateUrl: 'mainApp/dashboardPage/leftPane.html',
controller : 'leftSidePaneController'
},
'body#admin': {
templateUrl: 'mainApp/dashboardPage/tabHolder.html'
},
'footer#admin': {
templateUrl: 'mainApp/dashboardPage/footer.html'
}
}
});
$urlRouterProvider.
otherwise('/');
I am newbie to angular. When I give, localhost/newgmr/admin it loads my app. But when I try to navigate to any other state, say forgot-password screen by typing localhost/newgmr/admin/forgot-password into the browser's url and hit enter, the app shows 404 page. However, I can achieve this by clicking on a link which will call the state "page.forgotpassword". I understand that this happens because there is no actual directory like forgot-password and there is no index.html in that location either. So, please help me how to achieve this. User must be able to navigate to a state by typing the url as well.
If the data provided is not enough, please let me know.
I have two main routes in my Angular app. "/" and "/something/{id}". I'd expect any other route (e.g. "site.com/#/tree") to throw an error, however it's being routed to my main route.
$stateProvider
.state('main', {
parent: 'app',
url: '/',
data: {
authorities: [],
pageTitle: 'Main'
},
views: {
'content#': {
templateUrl: 'app/main/main.html',
controller: MainController
}
}
})
.state('main.id', {
url: '^/main/{id:int}',
views: {
'content#': {
templateUrl: 'app/main/main.html',
controller: MainController
}
}
});
Is there a way to make my main state only match the exact "/" url?
Try
app.config(["$urlRouterProvider","$stateProvider",
function($urlRouterProvider, $stateProvider) {
//reroute to error page
$urlRouterProvider.otherwise({templateUrl:'/404.html'});
//the rest of your $stateProvider code goes here.
}
]);
In Ionic I got a slider in one tab. On click on a slide I want to jump to a subpage on another tab. I achieve that using
$state.go('^.station', {stationId:clickedSlide});
I get to view alright, but there is no back button to the root view (.stationen) of this tab. It seems to clear the entire historyStack of this tab. Even if I try to first jump to .stationen first and then to .station I do not get a back button.
My stateProvider looks like so:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapController'
}
}
})
.state('tab.stationen', {
url: '/stationen',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-stationen.html',
controller: 'StationenCtrl'
}
}
})
.state('tab.station', {
url: '/stationen/:stationId',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-station.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/map');
});
I tried setting options in my $state.go() call but to no avail. Also nesting the .station in .stationen did not get me any results. What am I missing?
I cretaed a new ionic blank app intuit there are two html pages: 1 index.html and a category.html. I configured the states and then added controller in app.js file but it is not working.
This is my state configurations:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'index.html'
})
.state('category', {
url: "/category",
templateUrl: "category.html",
controller: 'CategoryCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/camera');
})
And this is my controller:
.controller('CameraCtrl',function($scope,$state){
$scope.menu = function() {
console.log('yesytest');
$state.go('category');
// window.location = "category.html";
};
})
This is my app.js. Is anything wrong here?
Unfortunately I only had 15 minutes to mock this together, Let me know if this works for you and if you need any further assistance drop me a response.
Controller
var example = angular.module('starter', ['ionic', 'starter.controllers',]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html'
}
}
})
.state('tab.camera', {
url: '/camera',
views: {
'camera': {
templateUrl: 'templates/camera.html'
}
}
})
.state('tab.category', {
url: '/category',
views: {
'category': {
templateUrl: 'templates/category.html'
}
}
});
$urlRouterProvider.otherwise('/tab/home');
});
>>> Working Example <<<