$state.params and $stateParams passing data - angularjs

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()

Related

Passing resolved data to child state in Ui-Router

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

$stateParams is getting empty value even though route has parameters

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);
}]);

state parameter value is mixed with url in UI-Router in angularjs when refresh is clicked

I am trying to creating web page to perform on edit actions in both in parent(first.edit) and child(second.edit) states.
I sending related state parameters through URL, those are captured by using regex patterns.
When I click on ui-sref="home.first.edit({firstId:10})" link the controller receiving state parameter firstId correctly i.e 10.
When I click on ui-sref="home.first.second.edit({firstId:10,secondId:20})" link or refresh the the state the controller receiving in correct value for firstId i.e 10/second/20.
and it is moving to parent state(home.first)
This is my js file
angular.module('MyApp', [
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
Here are the states:
$stateProvider.state('home', {
url: '',
views: {
'home_view': {
templateUrl: 'index.html',
controller: 'homeController'
}
}
})
.state('home.first', {
url: "/first",
params:{
firstId:null
},
views: {
'home_view': {
templateUrl: "first.html",
controller: 'firstCtrl'
}
}
})
.state('home.first.edit', {
url: "/{firstId:[0-9]+}/edit",
views: {
'first_view': {
templateUrl: "/edit_first.html",
controller: 'firstCtrl'
}
}
})
.state('home.first.second', {
url: "/second",
params:{
secondId:null
}
views: {
'first_view': {
templateUrl: "/second.html",
controller: 'secondCtrl'
}
}
})
.state('home.first.second.edit', {
url: "/{secondId:[0-9]+}/edit",
views: {
'second_view': {
templateUrl: "/views/testplan/projects/edit_second.html",
controller: 'secondCtrl'
}
}
})
Here is the rest of the code with controller definition
.controller(
'homeController',
function($scope, $state, $stateParams) {
// console.log($stateParams.firstId);
}
)
.controller(
'firstCtrl',
function($scope, $state, $stateParams) {
console.log($stateParams.firstId);
}
)
.controller(
'secondCtrl',
function($scope, $state, $stateParams) {
console.log($stateParams.secondId);
}
);
There is a working plunker
Your state definition could be simplified like this:
.state('home.first', {
url: "/first",
...
.state('home.first.edit', {
url: "/{firstId:[0-9]+}/edit",
...
.state('home.first.second', {
url: "/second",
...
.state('home.first.second.edit', {
url: "/{secondId:[0-9]+}/edit",
But the way you are expecting it to work should be like this:
.state('home.first', {
url: "/first/{firstId:[0-9]+}",
...
.state('home.first.edit', {
url: "/edit",
..
.state('home.first.second', {
url: "/second/{secondId:[0-9]+}",
...
.state('home.first.second.edit', {
url: "/edit",
These links will start to work then:
<a ui-sref="home.first({firstId:1})">
<a ui-sref="home.first({firstId:22})">
<a ui-sref="home.first.edit({firstId:333})">
<a ui-sref="home.first.edit({firstId:44444})">
<a ui-sref="home.first.second({firstId:4444})">
<a ui-sref="home.first.second.edit({firstId:1,secondId:333})">
<a ui-sref="home.first.second.edit({firstId:22,secondId:55555})">
Check it in action here

how to go to state with stateProvider?

Playing around with angular stateProvider, this is my route:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
On bootstrapping I would like to go to state 'test':
app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$state.go('test');
console.log('app.run');
}]);
These are the controllers:
app.controller('StartCtrl', function($scope) {
console.log('start');
});
app.controller('TestCtrl', function($scope) {
console.log('test');
});
Why is the application routing to the 'start' state ? I would like to go to the 'test' state?
Code reference:http://plnkr.co/edit/FCcL4M?p=preview
You need to change the url for either the test or the start "state", right now they are both the same. I changed the test state url to "/test" and it loaded correctly.
http://plnkr.co/edit/2esV4dbd4ptNSEmwD3g4?p=preview
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}
]);
Just need to add to previous answer : both start and test need to be corrected
to follow standards.
http://plnkr.co/edit/TjDzyL?p=preview
pp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/start",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);

Angular ui-router resolve not working

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; });
}
}

Resources