I have this list of users .. When a user clicks in one of those user in the list.. it will redirect me to my profileState with the associated UID of the user. I use state parameters to pass the UID from the userListState to the profileState..
When i type
console.log($stateParams);
it displays the UID which i passed from userListState .. but once i refresh the page.. the UID will become null.. So i would like to know how you guys make that specific data remain there after page reload.
How do you have configured your states? becuase you should do something like
.state('app.profile', {
url: '/profile/:uid',
views: {
'#app': {
templateUrl: 'app/profile/index.html',
controller: 'ProfileController as profileCtrl'
}
},
params: {
uid: null
}
})
this way when you go to your state you'll end up with
localhost/profile/234
you will refresh and uid will be there.
There are 2 common ways to store your uid:
Assign variables to $rootScope, that way its visible to all the controllers
localStorageService , this will hold the values even after user refreshes the page.
Related
I have some states which look like this:
.state('patient.patient-login', {
abstract: true,
template: '<ui-view></ui-view>'
})
.state('patient.patient-login.practiceID', {
url: "/patient-login/:practiceID",
scope: true,
templateUrl: "views/patient-login.html"
})
The problem is the :practiceID variable can be quite long and not user friendly, I want to give a user the ability to create a custom URL which is tied to the practice ID, for example on Facebook when you create an account you start out with a profile URL like this: http://facebook.com/123456789 but then you can change it to http://facebook.com/whateveryouwant
So essentially I want to accomplish something like this:
POINTER
http://domain.com/companyname > http://domain.com/#/patient-login/companyid
ANOTHER EXAMPLE
http://domain.com/ladentist > http://domain.com/#/patient-login/-85k3jfGEioltold
I was able to allow a user to set their unique url but I'm not sure how to even start to setup the routing like that?
Not sure what the rest of your project looks like but you could update your state to handle both id's and unique urls in the resolve property. Which would roughly look like this:
.state('patient.patient-login.practiceID', {
url: "/patient-login/:practice",
scope: true,
templateUrl: "views/patient-login.html",
resolve: {
patientData: [
'$stateParams',
'practiceSvc', // replace practiceSvc with however you are fetching data from your server
function($stateParams, practiceSvc) {
// check if the :practice param is an id or unique url
if ($stateParams.practice === /* id check */) {
// Call to API - get practice by ID
return practiceSvc.getByID($stateParams.practice);
} else {
// Call to API - get practice by unique url
return practiceSvc.getBySlug($stateParams.practice);
}
}
]
}
})
This assumes you can tell the difference between a unique url and an id. If you can't do that you could update it to check for the id first then the unique url if no practice is found.
The backend has created user and needs the email to be confirmed and it has sent out an to the address (see below)
Please confirm your account by clicking
after clicking on the link the user goes to the frontend I have the following route setup using ui.router:
.state('confirmemail', {
url'/confirmemail',
templateUrl: 'client/view/confirmEmail.html' })
how do I get this to route to this state using the above link and how do I access the user and code?
thanks
You can use stateParams:
In the email:
Link
In your config:
.state('confirmemail', { url'/confirmemail/:id', ... })
In your controller:
var myId = $stateParams.id;
// Then lookup user with myId
The link the user clicks on should go to yoursite/confirmemail. Simple as that, just have them navigate to the route that matches the url in your state.
As for passing the information, I can think of a couple options. You could pass a querystring, yoursite/confirmemail?userId=123 or whatever, or you could set up your route to pass some sort of id (or whatever the information may be). Either would have basically the same result. Again, you would define this in your email link then capture it when that path is hit.
Example of passing id using angular:
.state('confirmemail', {
url: '/confirmemail/:id',
resolve: {
id: function ($stateParams) {
return $stateParams.id;
}
}
}
and set the link to yoursite/confirmemail/123 where 123 is the user id.
From there you can inject the id into a controller.
I have two kinds of states in my $stateProvider which are authenticated user access url and public access url..
I have some sort of urls in public access , the thing is i need to prevent these url to access of authenticated user and need to change the url with another one.
Example Suppose,
http://localhost:3000/#/pjobadd/1 is public access url,
if authenticated user will access this url i need to change as http://localhost:3000/#/jobadd/1 .
I'm trying to take the solution as bellow
i have attached parameter in state provider like
.state('admin-panel.public.jobadd', {
url: '/pjobadd/:jobID',
templateUrl: 'app/public/jobadd.tmpl.html',
controller: 'PublicJobaddController',
resolve: {
jobAdd: ['Public', '$stateParams', function(Public,$stateParams) {
return Public.jobAdd($stateParams.jobID);
}]
},
data: {
requireChange: 'pjobadd'
}
})
and used that requireChange in app.js as following
$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
if (!Auth.isAuthenticated()){
var requireChange = toState.data.requireChange;
console.log(requireChange);
switch(requireChange){
case 'pjobadd':
$state.go('admin-panel.default.jobadd');
case 'psearch':
$state.go('admin-panel.default.search');
}
There are issues i need to append the url passed parameters and $state.go() also not redirecting to the mentioned url.
i don't think that it'l be the efficient way.
Can anyone suggest a way to it???
check this url ...
How to pass parameters using ui-sref in ui-router to controller
can you provide your code here?and give me some more clear information about your requirement..
Basically, this is a social sort of application that I am working on.
So, for this app to work, the '/home' state shows a list of users. The 'friends/X' (X being user id) shows the profile of that user.
So, here is my app with the ng controller in the element:
ng-click="profile({{friend.id}})"
This hooks up and sends a function call to my controller "HomeController" which is currently in "/home". My problem is, how do I open a new state and pass a variable, the friend.id in this case to the state?
Thank you :)
EDIT:
Basically I want to know how a function "profile" can capture the id, then call the new state and send it the variable id of friend.id
EDIT 2:
Basically, in the profile function which is in the "HomeController" it will accept a ID as a perameter, so for example "1", and it will use the value it received and send the application to a NEW state for example now the new state is going to be "ProfileController" and it will be "/home/profile" or something like that, and it will pass along the "1" into the url, like so: "/home/profile/1".
If you want to do this inside a function, you should use the $location service to change the URL. Then the route will update, and the profile controller can take over.
<a ng-click="profile(friend.id)">{{friend.name}}</a>
... And in the controller:
$scope.profile = function(id) {
$location.url('/home/profile/' + id);
};
However, unless you need to do something with the click before changing the route, you can probably just do it with an href:
<a ng-href="#/home/profile/{{friend.id}}">{{friend.name}}</a>
If you stick to this method and leave it to the routing mechanism to choose the right controller, then your user will be able to copy/bookmark/jump to that URL directly, and use the back/forward buttons in the browser.
Use the $routeProvider service to tell AngularJS which controller to use based on the URL. For example (this should go in your module's .config):
$routeProvider
.when('/home/profile/:friendId', {
templateUrl: 'profile.html',
controller: 'ProfileController'
})
...etc
Then you can use $routeParams in ProfileController to get the current friendId parameter.
Two similar/related questions:
1) While in a $stateChangeStart event, is it possible to allow the url to change, but prevent the actual state transition?
If I use event.preventDefault(), it prevents the URL from updating.
2) Is it possible to change the url of a state that you've already created?
I've created a state with no url that I'm using to display different templates for unauthorized states (if a user doesn't have the proper authorization, they're redirected to this state, but I want the URL to reflect that they were trying to reach the original URL).
$stateProvider.state('unauthorized-role', {
data: {
targetState: null
},
views: {
'main-view': {
controller: 'UnauthorizedCtrl',
templateUrl: '/src/app/role-unauthorized.tpl.html'
}
}
});
When I go to redirect to this state (in $stateChangeStart), I do the following:
ev.preventDefault();
var unauthState = $state.get('unauthorized-role');
unauthState.url = toState.url;
unauthState.data.targetState = toState;
$state.go(unauthState);
But it doesn't inherit the new url. Is it possible to change it somehow?
$state.go(unauthState, { location: false });