For the following code sample, the params does not seem to take affect. but if I put the param as part of url then it works fine. Both are supposed to be equivalent. However putting in params generates uncaught object exception. Where am I going wrong.
$stateProvider.state('start', {
params: ['lang'],
views : {
'navbar' : {
templateUrl: function($stateParams) {
return '/static/html/' + $stateParams.lang + '/navbar.html';
}
},
'jumbotron' : {
templateUrl: function($stateParams) {
return '/static/html/' + $stateParams.lang + '/jumbotron.html';
}
},
'main_content' : {
templateUrl: function ($stateParams) {
return '/static/html/' + $stateParams.lang + '/main_content.html';
}
}
},
url: '/'
})
Try removing the url from your state. I was having this same issue and removing the url from the state fixed it for me. See second answer on this Stack Overflow question for an example: How to send and retrieve parameters using $state.go toParams and $stateParams?
Related
I am migrating from UI-Router v0.4.x to v1.0 and I'm having an issue. Consider the following piece of code.
myApp
.component('myComponent', {
bindings: {
resolveBinding: '<'
},
controller: class myComponentController {
constructor() {
// ...
}
},
templateUrl: someTemplateUrl
})
.config(($stateProvider) => {
$stateProvider
.state('some-state', {
url: '/some-state',
component: 'myComponent',
resolve: {
resolveBinding: function(DependencyResolver) {
let targetStateName = this.self.name
return DependencyResolver.doSomeThingsFor(targetStateName)
}
}
})
})
In the new versionlet targetStateName = this.self.name will fail because this is now null, whereas before it contained information on the state it was transitioning to.
How can I get the state name in this block of code?
I was thinking about using a $transitions.onBefore hook to put the name on rootScope, and doing something like:
resolveBinding: function($rootScope, DependencyResolver) {
let targetStateName = $rootScope.hackyStateName
return DependencyResolver.doSomeThingsFor(targetStateName)
}
But I feel this is ugly and I'm missing out on something easier and more elegant.
You can inject $transition$ into a resolve function:
resolveBinding: function($transition$) {
console.log($transition$.to());
}
See the $transition$ documentation.
Does that help you?
I have a scenario, to handle the params. ( when param exist it will handled differently )
so, how can i keep 2 templates and use them according to the requirement? at present I am trying like this, which is not working at all.
any one help me?
my state with 2 template: ( please help me to correct )
.state('serialCreateCase', {
url: '/serialCreateCase?sn=',
views:{
"" : {
"templateUrl": 'app/login/loginWithSerial.html'
},
"?sn=" : {
"templateUrl": 'app/login/login.html'
}
}
})
here is the redirection with 2 scenarios: ( correct me if I am wrong )
if(!$rootScope.isUserLoggedIn && toParams.sn !== undefined ) {
console.log('dont take action', toState, toParams.sn );
$rootScope.canNavigate = true;
$state.go('serialCreateCase'); //works
$state.go('serialCreateCase', {sn:'1234'}); //not works
event.preventDefault();
return;
}
There is a working plunker
I would say that you need replace templateUrl with
Templates
TemplateUrl ...
templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT
injected.
TemplateProvider
Or you can use a template provider function which can be injected, has access to locals, and must return template HTML,
like this...
There are more details and plunkers
Angular UI Router: decide child state template on the basis of parent resolved object
dynamic change of templateUrl in ui-router from one state to another
This I prefer the most
...
templateProvider: [$stateParams, '$templateRequest',
function($stateParams, templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return templateRequest(tplName);
}
],
(check it here) because it uses also $templateRequest
EXTEND
There is a working plunker
this could be the state def
.state('serialCreateCase', {
url: '/serialCreateCase?sn',
views: {
"": {
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, templateRequest) {
var tplName = "app/login/loginWithSerial.html";
if($stateParams.sn){
tplName = "app/login/login.html";
}
return templateRequest(tplName);
}
]
},
}
});
what we really need is to always pass some value, as sn. So, these should be the calls:
// we need to pass some value, to be sure that there will be other than last
<a ui-sref="serialCreateCase({sn: null})">
// here is reasonable value
<a ui-sref="serialCreateCase({sn:'1234'})">
Check it here in action
use, $stateParams instead of toParams,
1) Deciding the template depending on the param(your requirement)
.state('serialCreateCase', {
url: '/serialCreateCase?sn=',
views: {
'': {
templateUrl: function(stateParams) {
var param = stateParams.sn
return (param == undefined) ? 'app/login/loginWithSerial.html' : 'app/login/login.html'
},
controller: 'myController',
}
}
})
You can check the stateParam using the parameter of templateUrl, and change the templates.
2) change the state depending on the param from controller.
This is a sample controller where you can check the state parameter and use the re directions as your wish.
allControllers.controller('myController', ['$scope','$rootScope','$state','$stateParams',
function($scope,$rootScope,$state,$stateParams) {
if(!$rootScope.isUserLoggedIn)
{
if($stateParams.sn !== undefined )
{
alert('dont take action', $stateParams.sn );
}
else
{
alert('You can redirect, no parameter present');
}
}
}
}])
Is it possible to pass a templateUrl parameter to the .state tab definitions similar to the following? I have multiple different pages to write and don't want a bunch of nested ng-ifs within a single template to parse out which "html" page to show:
.state('tab.menu', {
url: '/menu',
views: {
'tab-menu': {
templateUrl: 'templates/tab-menu.html',
controller: 'MenuCtrl'
}
}
})
.state('tab.menu-detail', {
url: '/menus/:menuID',
views: {
'tab-menu': {
templateUrl: function($stateParams,Menus) {
console.log("In function") ;
console.log("Template: " + Menus.get($stateParams.menuID).url) ;
return 'templates/' + Menus.get($stateParams.menuID).url ;
},
controller: 'MenuSubCtrl'
}
}
})
// controllers
.controller('MenuCtrl', function($scope,Menus) {
$scope.menus = Menus.all() ;
})
.controller('MenuSubCtrl', function($scope,$stateParams,Menus) {
$scope.menu = Menus.get($stateParams.menuID);
})
// services
.factory('Menus', function() {
var menus = [
{name:"Account",url:"menu-account.html",menuID:0},
{name:"Contact",url:"menu-contact.html",menuID:1},
{name:"Help",url:"menu-help.html",menuID:2},
{name:"Privacy",url:"menu-privacy.html",menuID:3},
{name:"Rate App",url:"menu-rate.html",menuID:4},
{name:"Report Bugs",url:"menu-bugs.html",menuID:5},
{name:"Settings",url:"menu-settings.html",menuID:6}
] ;
return {
all: function() {
return menus ;
},
get: function(menu) {
for (var i = 0; i < menus.length; i++) {
if (menus[i].menuID === parseInt(menuID)) {
return menus[i];
}
}
return null;
},
} ;
}) ;
In the above .state('tab.menu-detail'..., the templuateUrl function fires and the first console log entry works, the 2nd one does nothing, no message, no error...nothing. It just stops. I have tried multiple iterations to get this to work and am at a complete loss. When I click the above Tab page link (which is supposed to take you to a sub-custom view) it does nothing. No console message, no error...nothing.
You can assign function to template Url. I have faced the similar scenario following solution worked fine.
check this:
link
This is my code.
.state('appSetting.studentList', { url: '/student', views: { 'list#appSetting': { templateUrl: appUrl + '/Student/List', controller: 'StudentCtrl' } } })
.state('appSetting.studentList.details', { url: '/:studentId', views: { 'details#appSetting': { templateUrl: appUrl + '/Student/Edit', controller: 'StudentEditCtrl' } } })
.state('appSetting.employeeList', { url: '/employee', views: { 'list#appSetting': { templateUrl: appUrl + '/Employee/List', controller: 'EmployeeCtrl' } } })
.state('appSetting.employeeList.details', { url: '/:employeeId', views: { 'details#appSetting': { templateUrl: appUrl + '/Employee/Edit', controller: 'EmployeeEditCtrl' } } })
I have a add button on layout , when user click the add button call the following function.
$scope.gotoAdd = function () {
if ($state.current.name.indexOf(".details") == -1) {
$state.go($state.current.name + ".details")
}
else {
var paramId = $state.current.url.slice(2);
$state.go($state.current.name, ({ studentId: "", reload: true }));
}
};
In the above code working fine, but when open employee page user click add button i want to empty of employeeId parameter. I have number of links so if condition is using lengthy process. The above variable paramId dynamically changed (one time "studentId" , "employeeId" ,..............) depends on current state.
I tried the following code but not working because paramId contains string value
$state.go($state.current.name, ({ paramId: "", reload: true }));
Why are you putting the second parameter in '( )' in $state.go().
Try
$state.go($state.current.next, {}, {reload: true});
or
$state.go($state.current.next, {paramId: ""}, {reload: true});
$scope.gotoAdd = function () {
if ($state.current.name.indexOf(".details") == -1) {
$state.go($state.current.name + ".details")
}
else {
for (var prop in $stateParams) {
if ($stateParams.hasOwnProperty(prop)) {
$stateParams[prop] = '';
}
}
$state.go($state.current.name,$stateParams, { reload: true });
}
};
$state.go can take an inherit boolean parameter that serve exactly for this purpose.
As of UI router 0.2.15 -probably an old version, the documentation states
inherit - {boolean=true}, If true will inherit url parameters from current url.
In fact, it reset not only url parameters, but all $stateParams to their default, like what they are in state definition.
This will keep only state params as passed through the params object and all other are set to default or deleted.
$state.go('target.state', params, {inherit: false});
I want to navigate to another state/screen and pass a simple json object to this next screen.
I have the following:
var benefit = { "x": "y"};
$state.go('pages.claimed', { 'benefit': benefit });
My state looks like this:
.state('pages.claimed', {
url: '/claimed',
views: {
'page': {
templateUrl: 'templates/pages/claimed.html'
}
}
})
I can't however access the "benefit" object/parameter in the pages.claimed view. I'm using the ionic framework based on angular.
Parse object to json:
var benefit = angular.toJson({ "x": "y"});
Define variable in state params:
.state('pages.claimed', {
url: '/claimed?params',
views: {
'page': {
templateUrl: 'templates/pages/claimed.html'
}
}
})
Access to variable from controller via $stateParams:
var benefit = angular.fromJson($stateParams.benefit);
Here full doc
Edit:
There are several ways to pass an object to controller from url:
Via query params:
define options url: '/yoururl?a&b&c',
pass variables yoururl?a=1&b=2&c=3
Via url params:
define options url: '/yoururl/:a/:b/:c',
pass variables yoururl/1/2/3
For more complicated situations you can parse your object to json string and encode it with base64
Object: { a:1, b:2, c:3 }
JSON String: {"a":1,"b":2,"c":3}
Base64 Encoded string: eyJhIjoxLCJiIjoyLCJjIjozfQ==
define options url: '/yoururl?params'
pass variables yoururl?params=eyJhIjoxLCJiIjoyLCJjIjozfQ==
More info about base64
$state.go should be corrected like this
var benefit = { "x": "y"};
$state.go('pages.claimed', { benefit: benefit });
.state should be like this
.state('pages.claimed', {
url: '/claimed',
params: { benefit: null },
views: {
'page': {
templateUrl: 'templates/pages/claimed.html'
}
}
})
Catch the passed object as follows in the next controller
(function () {
'use strict';
angular.module('YourAppName').controller('ControllerName', ['$stateParams', ControllerName]);
function ControllerName($stateParams) {
var vm = this;
vm.variableToBind = $stateParams.benefit;
};
})();
Very clean solution:
app.js:
$stateProvider.state('users', {
url: '/users',
controller: 'UsersCtrl',
params: { obj: null }
})
controllers.js
function UserCtrl($stateParams) {
console.log($stateParams);
}
Then from any other controller:
$state.go('users', {obj:yourObj});
I'm not sure what you're application is doing, but if you need to share information between two controllers you should be using some sort of service, not passing a bunch of data through the URL. The URL is to pass parameters around to identify the state, not be the means of data transportation.
You're probably going to want a factory of some sort. Here's a little benefit registration service... assuming underscore.
.factory('benefitsService', ['_', function(_){
function BenefitsService(){
this.benefits = [{
id: 'benefit1',
x: 100,
y: 200
},{
id: 'benefit2',
x: 200,
y: 300
}];
}
// use this to register new benefits from a controller, other factory, wherever.
BenefitsService.prototype.addBenefit = function(benefit){
this.benefits.push(benefits);
}
BenefitsService.prototype.findById = function(id){
return _.findWhere(this.benefits, {id: id});
}
return new BenefitsService();
}]);
.run(['benefitsService', function(benefitsService){
// we're going to register another benefit here to show usage....
benefitsService.addBenefit({
id: 'addedBenefit',
x: 2000,
y: 4000
});
}])
Then you just pass the id through the URL to something normal "/url/:id"
.controller('firstController', ['$state', function($state){
$state.go('stateId', {
id: 'addedBenefit'
});
});
// and use your injected service to find your data.
.controller('secondController', ['$state', 'benefitService', function($state, benefitService){
var benefit = benefitService.findById($state.params.id);
// and you're home!
}]);
This way you don't end up with a bunch of cruft inside of your URL, only what you need to identify state. You've also obfuscated the storage mechanism, so you can use an object, local storage, or any synchronous storage mechanism you'd like.
You also have a service you can inject and use anywhere else through your application.
Looks like you missed parameter 'data' in your state:
.state('pages.claimed', {
url: '/claimed',
views: {
'page': {
templateUrl: 'templates/pages/claimed.html'
}
},
data: {
benefit: {}
}
})
Here is description from documentation