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?
Related
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');
}
}
})
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'
}
}
})
i am with doubt of like i call an view inside of other view. I want call the view " menu " in side of state "login" . However is not working
$stateProvider
.state('menu', {
abstract:true,
views: {
"menu": {
templateUrl: 'assets/templates/menu/menu.html',
controller: 'MenuController',
}
}
})
.state("login", {
url: '/login',
views: {
"": {
templateUrl: 'assets/templates/LoginTest.html',
controller: 'LoginController as ctrl',
},
"#menu":{ }
}
});
You need to use nested state for that.
This tutorial will help you AngularJS Multi-Step Form Using UI Router
working plunkr :https://plnkr.co/edit/ar9kbBCdggZxvUGDq5HI?p=preview
$stateProvider
.state('login', {
abstract:true,
url: '/login',
templateUrl: 'assets/templates/LoginTest.html',
controller: 'LoginController as ctrl'
})
// nested states
// each of these sections will have their own view
// url will be nested (/login/menu)
.state("login.menu", {
url: '/menu',
templateUrl: 'assets/templates/menu.html',
controller: 'MenuController'
}
);
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.
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?