I have multiple routes which serves different pages like so:
$routeProvider.
when('/routeone', {
templateUrl: '/routes/one',
resolve: {}
})
.when('/routetwo', {
templateUrl: '/routes/two',
controller: 'CampaignController',
resolve: {
}
})
.when('/routethree', {
templateUrl: '/routes/three',
resolve: {}
});
Each route page has different model fields but uses one single $scope variable i.e. $scope.template so in one route/template it is:
<span>{{template.var1}}</span>
on other it is
<span>{{template.var2}}</span>
I am fetching route specific data and storing it in $scope.template, but the issue is even when it is assigned it is not showing it on UI fields which are bound.. initially my $scope.template is set to empty string.
If i set all the fields that are used in all the route template like
$scope.template = { var1 = 'var1', var2='var2'}
it works which i don't want to do but if i set it to empty and fetch route specific on route change it doesn't.. can someone plz help..
here is the plnkr
I think you need this
https://docs.angularjs.org/api/ngRoute/service/$routeParams
Related
I'm using angular ngRoute and have two pages index.html#/pageone and index.html#/pagetwo. In pageone there are a list of folders which are the entrances of pagetwo. By clicking one of the folders, pageone pass folder name as parameter to pagetwo, there is a datatable on pagetwo, waiting for the parameter from pageone to display relevant content.
What I've done is fetch the parameter in pagetwo's controller and append query parameters to url so that I can still get parameter when refreshing pagetwo. But it seems this is not a right way. If I redirect from pageone to pagetwo with name=1, then click browser's back button, url will change from index.html#/pagetwo?name=1 to index.html#/pagetwo, There's no way to get parameters once I refresh page now. Any solution to store parameters passed from pageone in this case?
.when('/pageone', {
templateUrl: 'pageone.html',
controller: 'pageoneController',
reloadOnSearch: false
})
.when('/pagetwo', {
templateUrl: 'pagetwo.html',
controller: 'pagetwoController',
reloadOnSearch: false
})
pagetwoController:
if(direct from pageone) {
$scope.name = someService.getName()
$location.search('name', $scope.name)
} else {
//if reload page
$scope.name = $location.search().name
}
You can define parameters in your routes using : for instance :id creates a parameter variable called id
.when('/pageone', {
templateUrl: 'pageone.html',
controller: 'pageoneController',
reloadOnSearch: false
})
.when('/pagetwo/:id', { //add the id param here.
templateUrl: 'pagetwo.html',
controller: 'pagetwoController',
reloadOnSearch: false
})
your url for pagetwo would then be something like : /pagetwo/1
in your controller on pagetwo you can then get the params via the $routeParams variable.
See this for more information
I have a route that looks like the following:
.state('obj.subobj', {
url: '/subobjs?type',
templateUrl: '.../...layout.html'
})
The type parameter is important. If the app directs to this route without that param (i.e., /subobjs instead of /subobjs?type=...), I want to stop everything and set it to a default value before the template ever loads.
I've tried redirecting in a controller like so:
.state('obj.subobj', {
url: '/subobjs?type',
templateUrl: '.../...layout.html',
controller: function($state, $stateParams) {
if (!$stateParams.type) {
$state.go('obj.subobj', {type: 'default'});
}
}
})
This works in that it gets me to the correct page, but the template still loads the first time through when the parameter is not set.
I've also tried setting the default value in the controller above, but that doesn't seem to truly set it.
$stateParams.type = 'default'; // OR
$state.params.type = 'default';
Thoughts? Thanks for the help.
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'
})
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 have a situation in my Angular app where I'd like to consider an infinitely nested state/route. For example, let's say that I have a person and I want to see the lineage of the family. I might have routes that look like this:
/person/0
/person/0/child/1
/person/0/child/1/child/2
/person/0/child/1/child/2/child/3
And this could go on forever, as the user click further down the tree. How does a route like this get defined using ui-router?
You can use regex to define your route and then parse the url to get the child id, like this:
$stateProvider.state('person', {
url: '/person/:id',
views: {
'': {
templateUrl: 'parentTemplate.html',
controller: 'ParentCtrl'
}
}
}).state('child', {
url: '/person/:id/{path:.*}',
templateUrl: function(params) {
// params.path contains something like `child/1/child/2`
// so you get get the current child id like this
var path = params.path.split('/').reverse(),
childId = path[0];
// for more flexibility you can retrieve all ids from the request and store them in $stateParams
// so you can easily work with them in your controller
// here you can write some logic to determine the right template
return 'childTemplate.html';
},
controller: 'ChildCtrl'
});