I am hitting this url
http://localhost:8001/#/verifyMail?4c4e77a2
at that time i did
console.log($stateParams);
It shows empty object
My route is
.state('mailVerification', {
url: "/verifyMail?id",
templateUrl: "app/views/common/emailVerification.html",
controller: 'accountCtrl',
data: {
authorizedRoles: [USER_ROLES.all]
}
})
Why i am not getting $stateParams.id value? Please help me.
You need to resolve the data.
.state('mailVerification', {
url: "/verifyMail?id",
templateUrl: "app/views/common/emailVerification.html",
resolve: {
id: function($stateParams){
return $stateParams.id;
}
}
controller: 'accountCtrl',
data: {
authorizedRoles: [USER_ROLES.all]
}
})
and inside the controller:
.controller('accountCtrl', ['id', '$log', function(id, $log){
$log.debug(id);
}]);
Related
Hi I have been using stateprovider for a long time and this time I want to implement a functionality in which without changing the url, I want to go not found state but not on url.
This is my code.
(function () {
angular.module('mean').config(aosOfferConfig);
function aosOfferConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/link/404_not_found");
$stateProvider
.state('offers', {
url: '/offers/packages',
templateUrl: 'views/aosOffers/aosoffers.html',
controller: 'offersController',
controllerAs: 'packages'
})
.state('offersignup', {
url: '/offers/signup',
templateUrl: 'views/aosOffers/offerssignup.html',
controller: 'offersSignupController',
controllerAs: 'offerssignup'
})
.state('thankyou', {
url: '/offers/thankyou',
templateUrl: 'views/aosOffers/offersthankyou.html'
});
}
})();
Now in my otherwise part I am taking the user to /link/404_not_found. I don't want this. Instead, I want that it will remain in current url but the state should be changed. Just like github does.
How can I do this ?
do it this way
(function () {
angular.module('mean').config(aosOfferConfig);
function aosOfferConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(function ($injector, $location) {
var state = $injector.get('$state');
state.go('404_not_found', {}, { location: false });
return $location.path();
});
$stateProvider
.state('offers', {
url: '/offers/packages',
templateUrl: 'views/aosOffers/aosoffers.html',
controller: 'offersController',
controllerAs: 'packages'
})
.state('offersignup', {
url: '/offers/signup',
templateUrl: 'views/aosOffers/offerssignup.html',
controller: 'offersSignupController',
controllerAs: 'offerssignup'
})
.state('thankyou', {
url: '/offers/thankyou',
templateUrl: 'views/aosOffers/offersthankyou.html'
})
.state('404_not_found', {
template: '<h1>Notfound</h1>'
});
}
})();
I've read many posts but none of them work:
I want to pass some data using $state.go.
this is my state :
.state('app.404', {
url: '404',
views: {
'header#': {
templateUrl: 'views/empty.html'
},
'content#': {
templateUrl: '404.html',
controller: 'fofController'
},
'footer#': {
templateUrl: 'views/empty.html'
},
params: {errorInfo: null}
}
})
this is how I pass the data :
$state.go('app.404', {errorInfo: {status: 403, message: 'unauthorised', fix: 'You have to login'}});
and this is how I try to catch the data in my controller:
.controller('fofController', ['$scope', '$state',
function ($scope, $state) {
console.log($state.params);
}])
but the answer is an empty object ({}). I also used $stateParams like below but I get the same result, an empty object:
.controller('fofController', ['$scope', '$stateParams',
function ($scope, $stateParams) {
console.log($stateParams);
}])
option -1
.state('404.contact/', {
url: '/contact/:obj',
templateUrl: "contact.html",
controller: "contactCtrl",
params: {
obj: null,
}
})
.state('404.header', {
url: '/header/:number',
templateUrl: "header.html",
controller: "headerCtrl",
params: {
obj: null
}
})
option-2
$state.go(.....
You should try this code instead
$state.transitionTo(...
option-3
Perhaps try transferring with url
$stateProvider
.state('user', {
url: '/user/:obj',
templateUrl: 'templates/user.html',
controller: 'UserCont'
})
Maybe these are the solution to the problem.
Working example with $state.go()
So, I have a state where the resolve spits out an array which shows correctly on the frontend.
But I can't seem to be able to pass the parent resolve data to the child state.
$stateProvider.state('berliner', {
url: '/berlinerliste',
params : {search: 'Berliner 2017'},
resolve: {
fair: function(SearchService, $stateParams) {
return SearchService.getAllExhibitors($stateParams.search);
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'bl2017.htm',
controller: function($scope, fair){
$scope.fair = fair;
console.log($scope.fair);
}
}
}
})
.state('berliner.exhibitor', {
url: '/{id}',
resolve: {
exhibitor: function($stateParams, fair) {
var slug = $stateParams.id;
return slug;
}
},
views: {
'header': {
templateUrl: 'header.htm'
},
'wop':{
templateUrl: 'exhibitor.htm',
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
}
}
})
All the console log come out undefined.
What am I missing?
PLUNKR
Here's a Plunkr to examplify the issue.
I would say, that the concept should work.. just:
controller belongs to view. not to all views: {}
E.g. this (wrong)
// each view can have controller,
// but views : {} property 'controller' is not used at all
views: {
'header': {
templateUrl: 'header.htm'
},
'wop':{
templateUrl: 'exhibitor.htm',
},
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
should be adjusted as that:
views: {
'header': {
templateUrl: 'header.htm'
controller: function($scope, exhibitor, $filter){
$scope.fairs = $scope.fair;
console.log($scope.fair);
$scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
console.log($scope.chosenexhibitor);
}
},
'wop':{
templateUrl: 'exhibitor.htm',
controller: ...
There is an example, how
parent does resolve
child view's controller consumes it
states:
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
resolve: {
example: ['$timeout', function($timeout){
return $timeout(function(){
return {x: 1}
},100)
}],
},
})
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
})
child controller
.controller('ChildCtrl', ['$scope', 'example', function ($scope, example) {
console.log(JSON.stringify(example));
}])
Check it here
I'm trying to fetch data (units) for a route (app.units). Here's the code.
.state('app.units', {
url: '/units',
views: {
'menuContent' :{
templateUrl: "templates/units.html",
controller: 'UnitCtrl',
resolve:{
units: function($stateParams, ExamService, $rootScope, $http){
return $http.get(ApiEndpoint.url +'/units.json?auth_token='+$rootScope.globals.currentUser.userToken)
.success(function(response){
//console.log('hello');
return response.data;
})
}
}
}
}
})
As you can see this won't resolve, doesn't show any errors in the console and gives me a blank page in my ionic app, yet the endpoint works with Advanced Rest Client for chrome. I've been stuck on this for age could someone please figure this out.
Hey i just refactored your code. Try it
.state('app.units', {
url: '/units',
views: {
'menuContent' :{
templateUrl: "templates/units.html",
controller: 'UnitCtrl',
resolve:{
units : ['$stateParams','$q','ExamService','$rootScope', '$http',function ($stateParams,$q,ExamService,$rootScope, $http) {
var deferred = $q.defer();
$http.get(ApiEndpoint.url +'/units.json?auth_token='+$rootScope.globals.currentUser.userToken)
.success(function(response){
//console.log('hello');
if(response!=undefined)
deferred.resolve(response);
else
deffered.reject();
})
return deferred.promise;
}]
}
}
}
})
I am trying to load a get service JSON function in the main state resolve function so I can store the data to a scope variable.
The account JSON information is relevant because all sub pages are essentially dependent on the information.
--
The below code is partially working. The account resolve function is being successfully called and even the $http returns a promise (state === 0 though). The issue is when the account function resolves the state.controller is never being called.
$stateProvider
.state('app',{
url: '/',
views: {
'header': {
templateUrl: '../views/templates/partials/header.html',
},
'content': {
templateUrl: '../views/templates/partials/content.html'
},
'footer': {
templateUrl: '../views/templates/partials/footer.html',
}
},
resolve: {
account: function($timeout, accountFactory){
//Comment
return $http({method: 'GET', url: '/account.json'});
}
},
controller: ['$scope', 'account', function($scope, account){
// You can be sure that promiseObj is ready to use!
$scope.data = account;
console.log('SCOPE!!!!!');
}],
})
.state('app.accessory', {
url: 'accessory',
views: {
'content#': {
templateUrl: '../views/accessory/listing.html',
controller: 'accessoryListingCtrl',
controllerAs: 'vm'
}
}
})
}]);
Your parent state config is not correct. When using multiple named views A controller does not belong to a state but to a view, so you should move your controller statement to the specific view declaration, or all of them if you need it everywhere.
See here: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
},
}
})
I don't know why the controller does not get called. But you can start by making sure that resolve always return data.
resolve: {
account: function($timeout, accountFactory){
//Comment
return $http({method: 'GET', url: '/account.json'})
.$promise.then(
function(data) { return data; },
function(error) { return error; });
}
}