I'm trying to implement a forgot password flow in my application that collects some information from the user and passes it through states.
After the user submits their employee ID and where they want a reset code sent to (email or phone), I send both of those to the token state:
$state.go("^.token", { employeeId: forgot.employeeid, resetType: forgot.resetType });
My router is pretty straightforward:
$stateProvider.state("authentication.forgot", {
url: "/login/forgot",
templateUrl: "partials/authentication/forgot.html",
controller: "ForgotController as forgot",
onEnter: function () { $(document).foundation(); }
});
$stateProvider.state("authentication.token", {
url: "/login/token",
templateUrl: "partials/authentication/token.html",
controller: "TokenController as token",
onEnter: function () { $(document).foundation(); }
});
And here is my token controller:
app.controller("TokenController", function ($state, $stateParams, $timeout, Authentication) {
console.log($stateParams);
});
In my token controller, $stateParams ends up being an empty object.
You are not specifying any parameter in the $stateProvider definition, put a url parameter or define the params parameter in the $stateProvider definition.
url: "/login/token",
params: { object: {} },
templateUrl: "partials/authentication/token.html",
Note than {} is the default value for object, in case no params are specified in the state transition, and you'll be able to access this via $sateParams.object
You have to declare the params that you are trying to access in the state declaration.
$stateProvider.state("authentication.token", {
url: "/login/token?employeeId:[a-zA-Z0-9]*&resetType:[A-Z]",
templateUrl: "partials/authentication/token.html",
controller: "TokenController as token",
onEnter: function () { $(document).foundation(); }
});
You would then be able to access these in your controller via $stateParams.
Related
I am trying to add a parameter to my angular application. actually my app will dynamically called as :
"https://abc.ss.com/xx/sn=1234568505
to handle this state - in my $stateProvider - I am trying like this:
.state('serialCreateCase', {
url: '/sn=*', //but not working
templateUrl:'abxy.html',
controller: 'controllersss as ctrl',
}
})
But my URL is not capturing redirecting to default page. how to add the = parameter?
Try this:
.state('serialCreateCase', {
url: '^/sn={id}',
params: {
id: {}
},
templateUrl:'abxy.html',
controller: 'controllersss as ctrl',
}
That should match the url you're expecting.
Edit: answer has been updated to change it to required parameters.
Did you try this: http://benfoster.io/blog/ui-router-optional-parameters
Query Parameters
So that query parameters are mapped to UI Router's $stateParams object, you need to declare them in your state configuration's URL template:
state('new-qs', {
url: '/new?portfolioId',
templateUrl: 'new.html',
controller: function($scope, $stateParams) {
$scope.portfolioId = $stateParams.portfolioId;
}
})
You can then create a link to this state using the ui-sref attribute:
<a ui-sref="new-qs({ portfolioId: 1 })">New (query string)</a>
This will navigate to /new?portfolioId=1.
If you have multiple optional parameters, separate them with an &:
state('new-qs', {
url: '/new?portfolioId¶m1¶m2',
templateUrl: 'new.html',
controller: function($scope, $stateParams) {
$scope.portfolioId = $stateParams.portfolioId;
$scope.param1 = $stateParams.param1;
$scope.param2 = $stateParams.param2;
}
})
You could add params like this
state('serialCreateCase', {
url: '/xx?sn',
templateUrl: 'abxy.html',
controller: 'controllersss as ctrl',
}
})
The state ref will be
<a ui-sref="serialCreateCase({ sn: 1234568505 })">URL</a>
I can't retrieve parameters passed from ui-router in Ionic.
Parameters passed into the Controller are undefined
This is my state code:
.state('app.dayliston', {
cache: false,
url: '/myurl',
views: {
'mainContent': {
templateUrl: 'calendar/daylist.html',
controller: 'MyCtrl',
params : { 'mode':'online'}
}
}
})
and here is My Controller code:
.controller('MyCtrl', function($scope,$state, $stateParams,CalendarFactory,FBFactory, $ionicHistory,$ionicScrollDelegate,$ionicModal,$ionicPopup, $timeout) {
console.log('MyCtrl')
console.log('mode'+$stateParams.mode) // mode is undefined
....
})
I'm using 1.6.1. Is there anything wrong with my code?
As I can see in your code, you dont need to use $stateParams because you don't get the "mode" parameter from the URL.
I think attached data in state will be a better choice (Docs):
.state('app.dayliston', {
cache: false,
url: '/myurl',
data:{
mode: 'online'
},
views: {
'mainContent': {
templateUrl: 'calendar/daylist.html',
controller: 'MyCtrl'
}
}
})
Then you can get the data stored in state like this:
.controller('MyCtrl', function($scope, $state, $stateParams, CalendarFactory, FBFactory, $ionicHistory, $ionicScrollDelegate, $ionicModal, $ionicPopup, $timeout) {
console.log('MyCtrl')
console.log('mode'+$state.current.data.mode) // "online"
})
MyCtrl is the actual name of your controller. It's not a parameter that's passed to the controller per se.
Route:
.state('app.dayliston', {
cache: false,
url: '/myurl/:mode',
views: {
'mainContent': {
templateUrl: 'calendar/daylist.html',
controller: 'MyCtrl'
}
}
})
Check URL Routing Query Parameters doc
Link from view:
<a ui-sref="app.dayliston({mode: 'online'});">Go to dayliston</a>
Go to state/route from controller:
$state.go('app.dayliston', {mode: 'online'});
you are passing the $stateParams incorrectly
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
The should be on the url or you can pass data in using the resolve map on the state.
https://github.com/angular-ui/ui-router/wiki#resolve
also passing in custom data might be a better approach? Hard to tell from the code sample you provided
Trying to pass on a parameter to my ui router:
$state.go('orderDetail', {myParam: {accountID: $scope.selectedAccount}})
In my stateprovider the orderDetail state looks like this:
.state('orderDetail', {
templateUrl: 'modules/common/orders/partials/detail.html?referrer',
controller: 'OrderDetailCtrl',
url: '/detail/:myParam',
resolve: {
orderDetails: function (myservice, configService, $stateParams) {
console.log('resolve');
var referrer = $stateParams.myParam;
debugger;
console.log('stateParm', referrer.accountID);
console.log('order detail resolving');
//todo remove hardcoded
return myservice.getDetail(configService.config('mock_order_detail').url + '?accountId=2233');
}
}
});
However console.log('stateParm', referrer.accountID); shows up as undefined. How can I pass in the accountID param?
To recognize the state that myParam is object, you need to define its default value inside your state params option, by assigning null or any default value you want for it.
Code
.state('orderDetail', {
templateUrl: 'modules/common/orders/partials/detail.html?referrer',
controller: 'OrderDetailCtrl',
url: '/detail/:myParam',
resolve: {
//resolve code here
}
params: {
'myParam': null
}
}
To make above changes effective you Should update ui-router version to 0.2.13
Github Issue Link
$stateParams accepts only string, however you could stringify your object as pass it as myParam
$state.go('orderDetail', {myParam: angular.fromJson({accountID: $scope.selectedAccount})})
and then
.state('orderDetail', {
templateUrl: 'modules/common/orders/partials/detail.html?referrer',
controller: 'OrderDetailCtrl',
url: '/detail/:myParam',
resolve: {
orderDetails: function (myservice, configService, $stateParams) {
var referrer = angular.toJson($stateParams.myParam);
return myservice.getDetail(configService.config('mock_order_detail').url + '?accountId=2233');
}
}
});
But i don't recommend using stringified objects, better use a service as bridge for states, just because makes ugly URL and not secure, internal state must be hidden from user i belive
app.js:
$stateProvider.state('datasource', {
url: '/datasource',
templateUrl: 'views/datasource.html',
controller: 'datasourceController'
});
$stateProvider.state('datasourceList', {
url: '/datasource/:datasourceId',
templateUrl: 'views/datasource.list.html',
controller: 'datasourceController'
});
Then, I've a function activated onClick defined in (datasourceController)
$scope.submitSelected = function() {
if (angular.isDefined($scope.selectedSource)) {
$scope.datasource = dataSourcesService.find($scope.selectedSource.id);
$state.go('datasourceList', {datasourceId : datasource});
}
}
As I said, in my datasource.html view have an element click that triggers submitSelected() function
I can retrieve data successfully from my service based on ID when call it in function.
Problem is, i cant access the results (scope) of it in the view datasource.list.html after changing the state.
Add 'param' in state config
$stateProvider.state('datasource', {
url: '/datasource',
templateUrl: 'views/datasource.html',
controller: 'datasourceController'
});
$stateProvider.state('datasourceList', {
url: '/datasource/:datasourceId',
templateUrl: 'views/datasource.list.html',
params: ['index', 'anotherKey'],
controller: 'datasourceController'
});
And get values using $stateParams in another controller
app.controller('datasourceController', function($scope, $stateParams) {
var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
});
What is the best way to stop a user from going to a state if there is no data for that state? I need to redirect the user to /featured if there is no data in one of the other states.
I thought that I could check the controller for data first and then redirect using $state.go if the data was null, but I can't find an example of how to access data in a controller inside of an onEnter event
I think a code example should sum it up:
fseControllers.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/featured");
$stateProvider
.state('featured', {
url: "/featured",
templateUrl: "featured-template"
})
.state('friends', {
url: "/friends",
templateUrl: "friends-template",
controller: 'FseController',
onEnter: function(){
// Here I want to redirect to /featured if no data in controller
}
})
.state('stories', {
url: "/stories",
templateUrl: "stories-template"
})
.state('events', {
url: "/events",
templateUrl: "events-template"
})
})
You could refactor your controller to use a service , that can be injected into onEnter function and to the Controller.
AngularJS Services
onEnter:function(FriendsService, $location){
if(!!FriendsService.getFriends()){
$location.path("/featured");
}
}