I have some states defined as follows:
$stateProvider
.state('home', {
url: '/'
, templateUrl: 'modules/trulo/client/views/browse.client.view.html'
})
.state('search', {
url: '/search'
, templateUrl: 'modules/trulo/client/views/search.client.view.html'
})
.state('profile', {
url: '/profile'
, templateUrl: 'modules/users/client/views/settings/edit-profile.client.view.html'
})
.state('cart', {
url: '/cart'
, templateUrl: 'modules/trulo/client/views/cart.html'
})
.state('orders', {
url: '/orders'
, templateUrl: 'modules/trulo/client/views/orders.html'
})
.state('home.myshop', {
url: '/myshop'
, templateUrl: 'modules/trulo/client/views/myshop.html'
});
Next, I want to go back to the home page when I click on a button. This is done using ui-sref attribute on that button.
What should be the value that should be assigned to ui-sref to enable me to go back to home page upon clicking that button?
I am not getting any success with any of the following :
<button ui-sref="">Home</button>
<button ui-sref="/">Home</button>
<button ui-sref="home">Home</button>
Any suggestions would be appreciated !
Simply use ui-sref with the name of the state which is in your case :
ui-sref="home"
Next time, don't hesitate to check docs in the internet :)
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref
Your state for home is declared as follow:
.state('home', {
url: '/'
, templateUrl: 'modules/trulo/client/views/browse.client.view.html'
})
The code should be:
<button ui-sref="home">Home</button>
Related
With the following code, I'm trying to create a page with the url /admin, that would lead you to /admin/devices after clicking a button and after clicking another button to /admin/devices/new. The first part works properly and I get redirected to /admin/devices. The second part not quite, since it changes the url to /admin/devices/new but it doesn't change the template.
To change through url's I use $state.go(admin.devices) and $state.go(admin.devices.new)
Any idea?
$stateProvider
.state('admin', {
url: '/users',
abstract: true
})
.state('admin.devices', {
url: '/devices',
template: require('../templates/admin/devices/index.html'),
controller: 'AdminDevicesCtrl',
controllerAs: 'ctrl'
})
.state('admin.devices.new', {
url: '/new',
template: require('../templates/admin/devices/new.html'),
controller: 'AdminDevicesNewCtrl',
controllerAs: 'ctrl'
});
<a ui-sref="Contacts.Details.{{contact.Id}}" ng-click="showContactDetail(contact.Id)">
Here there is a ui-sref in which i am giving id.
I want the url as per that contact.Id
state('Contacts.Details', {
url: '/Details',
templateUrl: 'Contact/Detail',
controller: 'formController'
})
here is the config for contacts.details
i want to get contacts/details/(id which i clicked)
can any one help me out.
Here is how to do it
state('Contacts.Details',
{
url: '/Details:id',
templateUrl: 'Contact/Detail',
controller: 'formController'
})
Then you use
$state.go('Contacts.Details', {'id' : yourid});
to go where you want
(edit : here is how to use ui-sref)
ui-sref="Contacts.Details({id : yourid})"
Pass the ID as a parameter in your state call:
<a ui-sref="Contacts.Details({contactId: contact.Id})">...</a>
And then recover it in your state:
state('Contacts.Details', {
url: '/Details/:contactId',
templateUrl: 'Contact/Detail',
controller: 'formController'
});
URL routing docs in ui-router
I have states
.state('main', {
url: '/',
template: '<div ui-view=""></div>'
})
.state('main.header', {
url: 'header',
templateUrl: 'modules/core/views/header.html'
})
.state('main.header.sidemenu', {
url: '/sidemenu',
templateUrl: 'modules/admin/views/adminsidemenu.html'
})
.state('main.header.sidemenu.businesslist', {
url: '^/business/businesslist',
templateUrl:'modules/business/views/business.list.view.html',
})
.state('main.header.sidemenu.tabs', {
url: '',
templateUrl:'modules/business/views/tabs.business.view.html',
})
.state('main.header.sidemenu.tabs.profile', {
url: '^/business/profile',
templateUrl:'modules/business/views/tabs.business.view.html',
})
My html code in state->main.header.sidemenu.tabs.profile-> template
<li>
<a href="javascript:void(0)"
ui-sref="main.header.sidemenu.businesslist">XXXXX</a>
</li>
Then it throwing error Could not resolve 'branchUrl' from state ->main.header.sidemenu.tabs when I click anchor
How to solve this issue.
Can you please help me to this?
This error occurs when you have not defined the branchUrl state. Please check inside your state configuration and make sure branchUrl should be there.
This kind of error usually means, that some part of (js) code was not loaded. That the state which is inside of ui-sref is missing . You don't need to specify the parent, states work in an document oriented way so, instead of specifying parent: main, you could just change the state to main.header
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main.html");
$stateProvider.state('app', {
abstract: true,
templateUrl: "url"
});
$stateProvider.state('main', {
url: '/main',
templateUrl: "url1"
});
$stateProvider.state('main.header', {
url: '/main/header',
templateUrl: "url2"
});
$stateProvider.state('main.header.sidemenu', {
url: "/main/header/sidemenu",
templateUrl: "url 3"
});
$stateProvider.state('main.header.sidemenu.businesslist', {
url: "/main/header/sidemenu/businesslist",
templateUrl: "url 4"
});
for deep nesting you need to define all the states . hope it will help you
I need to intercept when user clicks on browser back button from a specific view to navigate it to home view rather than the default back page. Any ideas on how to do this?
I have states defined as below. I can't allow to navigate from the state 'paymentsubmitted' to 'payment'
$stateProvider
.state('home', {
url: '/' ,
templateUrl: 'search',
controller: 'payCtrl'
})
.state('details', {
url: '/details/{id:int}',
templateUrl: 'details',
controller: 'payDetailsCtrl'
})
.state('payment', {
url: '/payment',
templateUrl: 'Payment',
controller: 'payPaymentCtrl'
})
.state('paymentsubmitted', {
url: '/paymentsubmitted',
templateUrl: 'PaymentSubmitted',
controller: 'payPaymentCtrl'
});
I tried to use $locationChangeStart but next and current are looking at absolute urls. How can I have it look at the states that are defined? Thank you!
$rootScope.$on('$locationChangeStart', function (event, next, current) {
if (current == '') {
}
});
Can someone see why this is not working? /series is not loading the Gallery, however the /series/:id/seasons part is working. (Its not a missing ng-view problem see working code below!)
angular.module('xbmcremoteApp')
.config(function ($stateProvider) {
$stateProvider
.state('series', {
url: '/series',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
}).state('series.gallery', {
url: '',
templateUrl: 'app/series/series-gallery/series-gallery.html',
controller: 'SeriesGalleryCtrl'
}).state('series.seasons', {
url: '/:id/seasons',
templateUrl: 'app/series/seasons/seasons.html',
controller: 'SeasonsCtrl'
});
});
if i change it to this it works but thats not what i want:
angular.module('xbmcremoteApp')
.config(function ($stateProvider) {
$stateProvider
.state('series', {
url: '',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
}).state('series.gallery', {
url: '/series',
templateUrl: 'app/series/series-gallery/series-gallery.html',
controller: 'SeriesGalleryCtrl'
}).state('series.seasons', {
url: '/series/:id/seasons',
templateUrl: 'app/series/seasons/seasons.html',
controller: 'SeasonsCtrl'
});
});
EDIT and soltuion:
My post lacked some information. To make that clear: I want to display a gallery when the /seriesurl is called. And i want to display the seasons with the seasons url. No more views!
Found an very easy solution. Setting the abstract property to true forces the stateprovider to use the child view.
....
.state('series', {
abstract:true, //adding this line makes the states work as expected
url: '/series',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
})
....
In the first definition the url /series is evaluated as a root state 'series'
.state('series', {
url: '/series', // url evaluation will stop here, because
... // there is a match for /series
}).state('series.gallery', { // this will never be reached via url
url: '', // but ui-sref="series.gallery" will work
...
While the second mapping does distinguish both states, and '/series' will navigate to 'series.gallery' state :
.state('series', {
url: '', // url like "#" will navigate there
...
}).state('series.gallery', { // url /series will trigger this child state
url: '/series',
...
In general, if states should be unique by url, each of them should have some defintion. So mostlikely this should be working as inteded:
.state('series', {
url: '/', // url like "#/" will navigate to series
...
}).state('series.gallery', { // url '/series' will trigger this
url: '^/series',
...
check the magical sign: ^:
Absolute Routes (^) (cite:)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.