<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
Related
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
Can someone explain how I can route to a Url using parameters?
E.g. id like to click on a product and open more info of the product by Id.
My Routing so far ...
angular.module('shop', ["customFilters", "cart", "ngRoute"])
.config(function ($routeProvider){
$routeProvider.when("/complete", {
templateUrl: "../app/views/orderComplete.html"
});
$routeProvider.when("/placeorder", {
templateUrl: "../app/views/placeOrder.html"
});
$routeProvider.when("/checkout", {
templateUrl: "../app/views/checkoutSummary.html"
});
$routeProvider.when("/products", {
templateUrl: "../app/views/productList.html"
});
$routeProvider.when("/product:", {
templateUrl: "../app/views/product.html"
});
$routeProvider.otherwise({
templateUrl: "../app/views/productList.html"
});
});
So By clicking ...
<a class="btn btn-default" href="#/product/{{item.id}}">More Info</a>
Id like to be routed to product/{{id}}.html ...
Can someone advise what I am missing in ...
$routeProvider.when("/product:id", {
templateUrl: "../app/views/product.html"
});
2 things, but you are basically there.
First you are missing a slash before the URL param. Happens to the best of us.
routeProvider.when("/product/:id", {
templateUrl: "../app/views/product.html"
});
Secondly you should use ng-href instead href when you have dynamic URL params.
<a ng-href="#/product/{{item.id}}">More Info</a>
I thinks this issue is duplicate, see response How to pass parameters using ui-sref in ui-router to controller
you can send paramters to state name as home({foo: 'fooVal1', bar: 'barVal1'})
with a url '/:foo?bar'
see this exemple:
$stateProvider
.state('home', {
url: '/:foo?bar',
views: {
'': {
templateUrl: 'tpl.home.html',
controller: 'MainRootCtrl'
},
...
}
and send values as:
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
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>
Here is my $stateProvider configuration:
.state('itemDetail', {
abstract: true,
url: '/itemDetail/general/:itemid',
controller: 'ItemDetailsController',
templateUrl: './partials/itemDetails.html'
})
.state('itemDetail.general', {
url: "",
controller: 'ItemDetailsController',
templateUrl: "./partials/itemDetails.General.html"
})
.state('itemDetail.file', {
url: "/file/:itemid",
controller: 'ItemDetailsController',
templateUrl: "./partials/itemDetails.File.html"
})
The user can look at item using #/itemDetail/general/96045 and can click the link to look at file attachments. Now it is work but URL for files now is #/itemDetail/general/96045/file/96045.
Is it possible to have URL for files as #/itemDetail/file/96045?
Well, I would go with one parent and only one child state. There is a working plunker
This will be the new one child state itemDetail.type:
.state('itemDetail', {
abstract: true,
url: '/itemDetail',
controller: 'ItemDetailsController',
templateUrl: 'partials/itemDetails.html'
})
.state('itemDetail.type', {
url: "/:type/:itemid",
controller: 'ItemDetailsController',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest) {
var url = "partials/itemDetails.General.html";
if($stateParams.type === "file"){
url = "partials/itemDetails.File.html"
}
return $templateRequest(url);
}],
})
We are using here $stateParams.type to decide which template to load (and also $templateRequest to profit from angula built in caching)
And this will be the calling html:
<a ui-sref="itemDetail.type({type:'general', itemid:1})">
<a ui-sref="itemDetail.type({type:'file', itemid:22})">
The url will now look as expected
check it here
Yes it can be you need to give state as
.state('itemDetail.file', {
url: '/{itemId}',
controller: 'ItemDetailsController',
templateUrl: 'partials/itemDetails.html'
})
How do I load different layouts ?
Currently I have three layouts for my backend, one for admin, one for user and last for teacher i.e adminLayout.html, userlayout.html and teacherLayout.html for dashboards.
I am writing my routes something like this -
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/home.html',
controller: 'homeCtrl'
})
.when('/users/login', {
templateUrl: 'views/users/login.html',
controller: 'usersLoginCtrl'
})
.when('/users/dashboard', {
templateUrl: 'views/users/dashboard.html',
controller: 'usersDashCtrl'
})
.when('/teachers/login', {
templateUrl: 'views/teachers/login.html',
controller: 'teachersLoginCtrl'
})
.when('/teachers/dashboard', {
templateUrl: 'views/teachers/dashboard.html',
controller: 'teachersDashCtrl'
})
});
For /users/dashboard I want usersLayout.html and /teachers/dashboard I want teachersLayout.html.
How could I acheive this ?
I tried $window.location.href = "LINK_TO_LAYOUT"; but its is taking the whole path in the URL, however I want to my URL like -
mysite.com/teachers/dashboard
mysite.com/users/dashboard
mysite.com/admin/dashboard
You should use Ui-Router.
It support nested views.
So in your example your routes would be like this.
app.config(function($stateProvider){
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/pages/home.html',
controller: 'homeCtrl'
})
.state('users', {
url: '/users',
templateUrl: 'views/users/layout.html'
})
.state('users.login', {
url: '/users/login',
templateUrl: 'views/users/login.html',
controller: 'usersLoginCtrl'
})
.state('users.dashboard', {
url: '/users/dashboard',
templateUrl: 'views/users/dashboard.html',
controller: 'usersDashCtrl'
})
.state('teachers', {
url: '/teachers',
templateUrl: 'views/teachers/layout.html'
})
.state('teachers.login', {
url: '/teachers/login',
templateUrl: 'views/teachers/login.html',
controller: 'teachersLoginCtrl'
})
.state('teachers.dashboard', {
url: '/teachers/dashboard',
templateUrl: 'views/teachers/dashboard.html',
controller: 'teachersDashCtrl'
})
});
Then you need to creat this new Layout Pages.
On: views/users/layout.html
<div id="usersLayout">
<ui-view/>
</div>
On: views/teachers/layout.html
<div id="teachersLayout">
<ui-view/>
</div>
Hope this get you going.
One of ways use 'abstract' state from ui-router
$stateProvider
.state('contacts', {
abstract: true, // <<< this is your layout
url: '/contacts',
// Note: abstract still needs a ui-view for its children to populate.
// You can simply add it inline here.
// >>> Or use templateUrl: 'contactLayout.html'
template: '<ui-view/>'
})
.state('contacts.list', {
// url will become '/contacts/list'
url: '/list'
//...more
})
.state('contacts.detail', {
// url will become '/contacts/detail'
url: '/detail',
//...more
})
Please spend some time for learning ui-router and you will have powerfull and simple tool for routing in angularjs.
Check docs for more info about abstract state.