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);
}
}
});
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 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,
})
Well, I've implemented angularJS and I am calling different views which is being handled by $routeProvider . The problem is that for eg:
$routeProvider.
when('/prodDetails/:prodID', {
templateUrl: 'templates/productDetails.html',
controller: 'ProductController'
}).
Now, if I click on:
<a ng-href="#prodDetails/{{ prod.id }}">View Product</a>
The browser url will show prod.id in the url tab. How can I manipulate url to hide sensitive info in it.
Use Angular UI Router. it will solve your problem without doing anything. you can then pass parameter using params object given by angular-ui-router.
You can use angular ui router
You can achieve that by doing:
$stateProvider.
state('productDetail', {
url: '/prodDetails',
templateUrl: 'templates/productDetails.html',
controller: 'ProductController',
params: {
productId: 'defaultId'
}
})
And in the html:
<a ui-sref="productDetail({productId: prod.id})">View Product</a>
You can have access to the productId from the controller with the service $stateParams.
EDIT:
Let's say you have a encodeId and a decodeId functions:
<a ui-sref="productDetail({productId: encodeId(prod.id)})">View Product</a>
and in the controller:
app.controller(function($stateParams) {
var id = decodeId($stateParams.productId);
});
I am using angular router, and I have a route similar to the one below
angular.module("manageAbcApp", ["myApp", "ngRoute"])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: '/Scripts/app/views/abc/AbcList.htm',
controller: 'ListAbcController'
})
.when('/view/:id', {
templateUrl: '/Scripts/app/views/abc/AbcDashboard.htm',
controller: 'DashboardAbcController'
})
// more...
.otherwise({
redirectTo: '/list'
});
}]);
So as you can see there are 2 routes one for listing and other for dashboard of the item selected for the listing.
In the listing route a list view is selected and shown where I show a grid with some data, one of the column in this grid is the name column which is clickable and on click of it i change the route to href="#/view/{row.Id}".
This works fine.
But, How do I also pass some additional paramters to the DashboardAbcController like the name or any other details ?
Edit: I figured out I could use a service common to both these controller and on ng-click update some model in the service. But I do not want to use ng-click coz if I do then I ll lose the option to allow user to open my link in new tab, copy paste, share etc...
What about something like: Demo
.when('/list', {
templateUrl: '/Scripts/app/views/abc/AbcList.htm',
controller: 'ListAbcController'
})
.when('/view/:id/:name/:other/:details', {
templateUrl: '/Scripts/app/views/abc/AbcDashboard.htm',
controller: 'DashboardAbcController'
})
And, you could create a link like:
Home
Note: That you can pass other data as route params that you don't want to fix into the routes.
either use $rootscope to assign values ex. $rootscope.name = 'name' or use get parameter
.when('/view/:id?name=&id=', {
templateUrl: '/Scripts/app/views/abc/AbcDashboard.htm',
controller: 'DashboardAbcController'
})
We are new to AngularJS and finding one-or-two problems with setting up multiple routes when using ID's from Json Data.
We are trying to replicate AngularJS Tutorial, so we can click each 'View' button to display a more detailed page of the selected 'Warranty Item' same as the tutorial.
We have uploaded our AngularJS problem to Plunker, If anyone can see something we're missing or know a better route to go down please let us know.
App.js State with ResultSet.JobID
.state('home.singleWarranty', {
url: '/singlewarranty/{resultset.JobID}',
templateUrl: 'singlewarranty.html',
controller: 'warrantyListController'
})
There is a working/updated plunker
Because there are these states
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'homeController'
})
.state('home.singleWarranty', {
url: '/singleWarranty/:jobID',
templateUrl: 'singlewarranty.html',
controller: 'warrantyListController'
})
We need to build the url like this
View
Instead of this original
// View
The point is that state 'home.singleWarranty' inherits/extends the url from its parent. So we have to include the parents '/home' as well.
Other solution:
In case we would like to start the url in a child state from the begining, we can do it like this
.state('home.singleWarranty', {
url: '^/singleWarranty/:jobID',
See the ^ at the url begining. Then even this would work:
View
Check the updated plunker here