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.
Related
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.
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.
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.
I have angularjs project implemented multi-language and using ui-router for routing. Every language will be have different url. Ex:
http://example.com/!#/en-us/english-title
http://example.com/!#/es-es/spanish-title
All state with url registered automatically when app run and load them from database. Ex:
angular.module('bxApp').run(["$http", function ($http) {
$http.get('/Home/Routes').success(function (result) {
result = result || {};
if (angular.isDefined(result) && result !== null) {
_.each(result.Routes, function (route) {
stateProvider.state(route.Name, {
url: route.Url,
templateUrl: route.TemplateUrl,
controller: route.Controller,
});
});
}
});
}]);
It work well but it will not work when user copy this link and paste to browser or click this link from other website . I think because of state can't found so it will be redirect to default and it does not keep url that user enter or copy.
In this case , How to do that?
Thanks,
You're declaring your states as a result of an HTTP call to your server: the problem is that these states are defined too late for the user to navigate to them when he pastes the URL in a new tab.
To understand, let's deconstruct what happens :
The user is on the initial page / other website, and copies the URL.
He pastes it in a new tab
Your angular application loads, finishes its config phase without having declared any of those states, and sends an HTTP call.
ui-router fails to route to a state matching the pasted URL, since the corresponding state is not here yet, and redirects to default
The HTTP response comes back, and your states are created (but too late).
How to make it work ?
My first reaction would simply not to store your states on your server. Unless you want the very core of your UX to be language-dependent, you don't have to do that.
But hey, let's say we want to do it anyway. I suggest you try this : declare a toplevel 'language' state, and have it load the other states in a resolve clause. This will 'block' the routing until the other states are declared :
angular.module('bxApp')
.config(['$urlRouterProvider', function ($urlRouterProvider) {
$urlRouterProvider
.state('language',{
url: '/:language',
resolve: {
childrenLoaded: ['$http', function ($http) {
// returning a promise is essential to have the 'waiting' behavior
return $http.get('/Home/Routes').then(function (data) {
var result = data.result || {};
if (angular.isDefined(result) && result !== null) {
_.each(result.Routes, function (route) {
$stateProvider.state(route.Name, {
url: route.Url,
templateUrl: route.TemplateUrl,
controller: route.Controller
});
});
}
});
}]
}
})
}]);
Again, this approach is probably asking for trouble : I strongly recommend you hardcode your states instead of storing them in a database. If all that varies from one language to another is the text and URL, then you will be fine with an URL param.