I am building an app with AngularJS, and the question is:
I have links as part of a list of contacts that belong to a company, built with ng-repeat. After clicking it I should go to the details page of that (changing state).
But since I have already the organization’s name and I would like to avoid a second call to the API to get a name of the company I already have. Could I send TWO parameters over $stateParams like:
<a ui-sref=”contact/({id: contact.id})&((id: organization.id)}”>{{contact.name}}</a>
How would it look like in the app.js file?
$stateProvider
.state('contacts', {
url: "/contacts/:contactId&:organizationId",
templateUrl: 'views.contactDetail.html',
controller: contactsController,
params: {
contactId: null,
organizationId
},
})
<a ui-sref=”contacts({contactId:obj.contactId,organizationId:obj.organizationId})”>{{contact.name}}</a>
$stateProvider
.state('contacts', {
url: "/contacts/:contactId/:organizationId",
templateUrl: 'views.contactDetail.html',
controller: contactsController,
})
Related
I have two states as follows:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('my.list', {
url: '/myitem',
templateUrl: 'templates/my-item-list.html',
controller: 'myController'
})
.state('my.detail', {
url: '/detail',
templateUrl: 'templates/item-detail.html',
controller: 'myController'
})
In my-item-list.html I have used ng-repeat to list items, which are clickable.
On click the state changes to my.detail where I want to display details of selected/clicked item.
How to pass clicked data from one state to another? What would be best approach to follow? without displaying params in URL?
Best approach while navigating from one state to another on click of a link is by using ui-sref and you can pass params with it like:
<a ... ui-sref="my.detail({selected: 'something'})" ...>...</a>
In order to make that work, you need selected to be part of params in that state. Like this:
.state('my.detail', {
url: '/detail',
params: {selected: null},
templateUrl: 'templates/item-detail.html',
controller: 'myController'
})
Now, you can use that in your myController using $stateParams.selected.
I'm using angular-ui-router to build a one page app.
In my "cerca" state I have a table that show all user in my db.
The last columns of any row contains a link to the i-th user.
I would like to be able to click on this link and show a user page with all information about a specific user (maybe retrieved from db using user id).
In my "cerca" state I have the ids of all users. I'm trying to use them to build a dynamic url but I have difficult to pass the id to the new state. This is my app.config:
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url:'/home',
templateUrl: 'pages/home.html',
controller: 'homeCtrl'
})
.state('inserisciP',{
url:'/inserisciP',
templateUrl: 'pages/inserisciPaziente.html',
controller: 'inserisciController'
})
.state('cerca',{
url:'/cerca',
templateUrl:'pages/cercaPaziente.html',
controller: 'cercaController'
})
.state('paziente',{
url:'/paziente',
templateUrl:'pages/paziente.html',
controller: 'pazienteController'
})
.state('inserisciE',{
url:'/inserisciE',
templateUrl:'pages/inserisciEsame.html'
})
.state('listaLavoro',{
url:'/listaLavoro',
templateUrl:'pages/listaLavoro.html',
})
.state('refertazione',{
url:'/refertazione',
templateUrl:'pages/refertazione.html'
})
.state('nomeUtente',{
url:'/nomeUtente',
templateUrl:'pages/nomeUtente.html'
})
.state('amministrazione',{
url:'/amministrazione',
templateUrl:'pages/amministrazione.html'
})
.state('richiestaRadiologia',{
url:'/richiestaRadiologia',
templateUrl:'pages/richiestaRadiologia.html'
})
.state('help',{
url:'/help',
templateUrl:'pages/help.html'
});
});
and this is my table:
<tr ng-repeat="p in copiaTable">
<td>{{p.id}}</td>
<td>{{p.last_name}}</td>
<td>{{p.first_name}}</td>
<td>{{p.codice_fiscale}}</td>
<td>{{p.phone_number}}</td>
<td><a ui-sref="paziente">edit</a></td>
</tr>
I also tryed to create a service to share data between states...
Any suggestion on how can I solve this issue with ui-router?
You can pass a parameter to a state when you click the link. Let's say you want to pass an user ID. The code of the link would be like this:
<a ui-sref="paziente({userID: p.id})">edit</a>
In your route configuration file, you can define paziente state like this:
state('paziente',{
url:'/paziente/:userID',
templateUrl:'pages/paziente.html',
controller: 'pazienteController'
})
With the passed ID, You can find an user from your factory.
The user data should be resolved like this:
state('userInfo', {
url: 'user/:userId',
templateUrl: 'userProfile.html',
resolve: {
user: function($stateParams, UserService) {
return UserService.getUser($stateParams.userId);
}
}
});
I have the following routing configuration:
myApp.config(function ($stateProvider) {
$stateProvider
.state('courses',
{
url: '/courses',
templateUrl: '/js/courses/courses.html',
controller: 'CoursesCtrl'
})
.state('courses.course',
{
url: '/{courseId}',
templateUrl: '/js/courses/course.html',
controller: 'CourseCtrl'
})
.state('courses.course.lessons',
{
url: '/lessons',
templateUrl: '/js/courses/lessons.html',
controller: 'LessonsCtrl',
})
.state('courses.course.about,
{
url: '/about,
templateUrl: '/js/courses/about.html'
})
;
});
I have a reference in the page like this
<a ui-sref="courses.course({courseId: c.id})"> Course # {{c.id}}</a>
This reference leads to the view of the course’s details.
This view has a nested view, which allows seeing different detail of the course such as lessons list and description. I want to have a direct reference to the view, which contains lessons list of the particular course.
I’ve tried something like ui-sref="courses.course({courseId: c.id}).lessons", but it leads to the error.
Could you tell me what is the right way?
this is the syntax
<a ui-sref="courses.course.lessons({courseId: c.id})"> Course # {{c.id}} lessons </a>
and check you have defined parent state or not..
I have a request to add in another URL parameter that directs to a state that I already have set up. For efficiency purposes, I'm trying to see if I can add multiple URLs to point to the same state, or should I just use the $UrlRouterProvider.when() method to re-direct to that state in this new case.
Ex. this is what already exists
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
and the request is to add www.site.com/newlink that points to the link1 page. Is there something like this;
.state('site.link1',
{
url: '/link1, /newlink',
...
Try using the Regex and a parameter in the url. It is not optimal but works.
.state('site.link1',
{
url: '/{path:link1|newlink}',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
More information on regex in Urls.
To generate links with ui-sref pass the same parameter with the state name as a function
<a ui-sref="site.link1({path:'link1'})" >site link 1</a>
<a ui-sref="site.link1({path:'newlink'})">site new link</a>
You use params:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
.state('site.link',
{
url: '/{link}'
..
}
so when you use the same state like this
$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})
you can used when() function
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
then on root config
angular.module('myApp', [...])
.config(function ($urlRouterProvider) {
$urlRouterProvider.when(/newlink/, ['$state','$match', function ($state, $match) {
$state.go('site.link1');
}]);
});
I found this approach to be quite simple and clean: create two equal states, just changing the url property
//Both root and login are the same, but with different url's.
var rootConfig = {
url: '/',
templateUrl:'html/authentication/login.html',
controller: 'authCtrl',
data: {
requireLogin: false
}
}
var loginConfig = Object.create(rootConfig)
loginConfig.url = '/login'
$stateProvider
.state('root', rootConfig)
.state('login', loginConfig)
I had almost the same problem, only with another constraint - I didn't want to use a redirect, since I wanted the url in the browser to stay the same, but display the same state.
This was because I wanted the chrome saved passwords to work for users that already saved the previous url.
In my case I wanted these two urls :
/gilly and
/new/gilly
to both point to the same state.
I solved this by having one state defined for /gilly, and for the second url, I defined an abstract state called /new.
This should be set up like this :
$stateProvider.state('new', {
abstract: true,
url: '/new'
template: '',
controller: function() { }
}).state('gilly', {
url: '/gilly',
template: 'gilly.html',
controller: 'GillyController'
}).state('new.gilly', {
url: '/gilly', // don't add the '/new' prefix here!
template: 'gilly.html',
controller: 'GillyController'
});
While using ui-view in AngularJS, I'm trying to use URL parameters inside of nested views.
For entities of a given type, I want to be able to show all of the entities when navigating to the url /entities, but I would also like to see only the entities of a given type if I go to entities/ofcategory/categoryName. Lastly, I also want to be able to navigate to /entities/details/entityName to see the details of one entity.
Is this structure possible?
This is my ui-routercode:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('entities', {
url: '/entities',
templateUrl: 'app/entities/views/entities.html'
})
.state('entities.ofcategory', {
url: '/ofcategory/:categoryName',
templateUrl: 'app/entities/views/entities.ofcategory.html'
}
.state('entities.details', {
url: '/details/:entityName',
templateUrl: 'app/entities/views/entities.details.html'
});
}]);
If I'm navigating to entities/ofcategory/aname or /entities/details/aname I enter the regular entities controller instead of the category or detailsController
One option is to add an abstract state, which serves as a parent to all your entities states. In that case all your urls become relative to this parent state. Please note that you have to define a ui-view in the template of the abstract state, so it could be used for loading the child templates.
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('entities', {
url: '/entities',
abstract: true,
templateUrl: 'app/entities/views/entities.html'
})
.state('entities.all', {
url: '/',
templateUrl: 'app/entities/views/entities.all.html'
})
.state('entities.ofcategory', {
url: '/:categoryName',
templateUrl: 'app/entities/views/entities.ofcategory.html'
}
.state('entities.details', {
url: '/details/:entityName',
templateUrl: 'app/entities/views/entities.details.html'
});
}]);
app/entities/views/entities.html:
<div>
<h1>Entities<h1>
<div ui-view></div>
</div>