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'
})
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);
}
}
});
Hi all angularjs developer, I have followed the ng document (link) .I have searched since many times but i did not find any solution that will help me properly. I need to change route without reloading the controller and template. I have written a route that look like this below:-
$routeProvider
.when('/page1', {
templateUrl: 'page1',
controller: 'page1Ctrl',
caseInsensitiveMatch: true,
reloadOnSearch: false
})
.when('/page2', {
templateUrl: 'page2',
controller: 'page2Ctrl',
caseInsensitiveMatch: true,
reloadOnSearch: false
})
.when('/page3', {
templateUrl: 'page3',
controller: 'page3Ctrl',
caseInsensitiveMatch: true,
reloadOnSearch: false
}).otherwise({ redirectTo: '/index' });
Moreover, at first I go to the page1 then page2 then page3 after that now i want to go to the page1 without reloading or calling page1Ctrl and page1 template. Example: suppose when i was page1 that time i have worked something like i have selected an ng-grid record which was paging size 3 and i have inputted some fields. After that i go the page3 then i go to the page1 again. Now this time i want to see the page1 what i selected ng grid record and what i inputted. How can i solve this? Thanks.
I want to suggest to use Angular Ui.router
you will have the ability to change the state of routes , for more check the documentation
To persist data when moving away from a controller and then back again, the recommended Angular approach is to use services. See this NG-Conf talk: https://www.youtube.com/watch?v=62RvRQuMVyg.
To persist input fields and paging index when leaving page1Ctrl and then returning, for example, you could create a pagingModelService.
function PagingModelService($rootScope)
{
var pagingModelService = {};
////////////////////
// persisted data //
////////////////////
pagingModelService.pagingIndex;
pagingModelService.field1;
pagingModelService.field2;
////////
//Init//
////////
return(pagingModelService);
}
Then inject the service in the controller, and set the $scope values to the service:
function Page1Ctrl($scope, pagingModelServiceModel)
{
///////////////////////////////////////////////////
//set local $scope variables to persisted service//
///////////////////////////////////////////////////
$scope.pageIndex = pagingModelService.pagingIndex;
$scope.field1 = pagingModelService.field1;
$scope.field2 = pagingModelService.field2;
}
Also, you can look into angular-local-storage for persisting data: https://github.com/grevory/angular-local-storage
I want to know if it's possible to make some hidden routes with angularjs, for example I have a category and sub category, in my application I have
.when('/category/new' ,{
controller : 'newCategoryCtrl',
templateUrl : '/category.html'
})
.when('/category/:id/sub/new' ,
{ controller : 'newSubCategoryCtrl',
templateUrl : '/subCategory.html'
})....
in my case , if you want to add new subcategories you have to search by category, and after that you have the access to subcategory view. but the problem with configuration, you can access this url if you know it without any restriction
What you can do is have a route that will handle the incorrect sub-route before the correct sub-route. You can actually leverage the same sub-route controller, evaluate the $routeParams and bounce back to whatever route you like.
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/page/new', { templateUrl: 'page.html', controller: 'pageCtrl'})
.when('/page/:id/:substuff', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.when('/page/:id/sub/new', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.otherwise({ redirectTo: '/page/new' });
}]);
Here's a plunk
I'm not clear why this isn't functioning. The rest of my code - sans the URL Param-based routing is working fine, I've tested that all. However, when I tried to include a URL argument in my url (base.url/route/:param) the '.otherwise' element of my routeProvider is firing instead of the appropriate controller designated in the routeProvider.
Here's the relevant bits of code:
module.config
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/home',
{
templateUrl: 'app/partials/home.html',
controller: 'HomeController'
})
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
.when('/projects',
{
templateUrl: 'app/partials/project_list_tpl.html',
controller: 'Projects'
})
.when ('/site-help',
{
templateUrl: 'app/partials/site-help.html'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
module.controller
app.controller('ImplReference', function($scope, $routeParams) {
alert('hi');
});
I get my 404 page when going to /implementation-reference/whatever.
Any ideas why I don't see the alert I put at the beginning of my controller, nor see any errors in the console?
As best as I can tell, the issue lay in use a dash in the param as defined in RouteProvider. I originally had:
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
when I changed it to this:
.when('/implementation-reference/:ref',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
...suddenly everything works fine.
I noticed this after adding a controller to the 'otherwise' that showed me the $route information. After drilling through it, I saw that the regex on the pre-defined route which had the param was only working on the part before the dash.
I've been mystified by this for hours, and can't imagine how this isn't documented more clearly somewhere. Perhaps this is some newbie mistake (I am new to this).