I have a state in my config.js which looks like this:
state("link_redirect", {
url: "/link-redirect/",
controller: "LinkRedirectCtrl",
title: "Redirect Link",
params: {endpoint: null}
});
I dont want to change the state definition in shown above, still how can I send the endpoint params in URL so that I can fetch it using $stateParams service in my controller ?
There are two ways to access state params. Send as your state definition
state("link_redirect", {
url: "/link-redirect",
controller: "LinkRedirectCtrl",
title: "Redirect Link",
params: {endpoint: null}
});
Access them like, $stateParams.params.endpoint
But if you want your endpoint visible in URL, you must send like
url: "/link-redirect/:endpoint"
Remove params: {endpoint: null}
and access it like this $stateParams.endpoint
Related
I am a newbie for Angular.
I am having the following Angular JS(v.1.7) ui-router
.state('helpPage', {
url: "/help",
data: {
roles: []
},
views: {
helpDoc: {
templateUrl: 'app/modules/help/help.tpl.html',
controller: 'helpCtrl'
}
}
})
When the User hits this page I want to retrieve the Headers.
Can I get them in the Controller or in the ui-route's resolve method itself ?
Tried HttpInterceptor but it is not helping out.
Any help is much appreciated.
Use the headers property of the $http response object:
$http.head(url).then(function(response) {
var headerGetter = response.headers;
console.log(headerGetter("headerName"));
});
For more information, see
AngularJS $http Service API Reference - $http.head
**Task:**to retrieve product based on product_id:
Example: When I hit localhost:8080/products/44566
the server responds with product page for product with product id : 44566
The Home page where there are products and when I click on them,they pass the product_id to the Angular JS controller like this:
$scope.getProductPage = function(product_id){
// window.location.assign("/products/"+product_id);
$http({
url:"/products/"+product_id,
method : "GET"
}).then(function mySuccess(response){
window.location.assign("/products/"+product_id);
}, function myError(response){
});
};
This sends data to the Node server here:
//API to GET the sell page
router.get('/products/:product_id', function(req, res, next) {
var product_id = req.params.product_id;
console.log('product_id', product_id);
res.render("productPage", {data: req.params.product_id});
});
This means I render productPage.ejs and the response goes back successfully to my angular js controller:
$scope.getProductPage = function(product_id){
// window.location.assign("/products/"+product_id);
$http({
url:"/products/"+product_id,
method : "GET"
}).then(function mySuccess(response){
window.location.assign("/products/"+product_id);
}, function myError(response){
});
};
wheree it uses window.location.assign("/products/"+product_id); to go to the page with that specific product_id. But when that page loads, I see the following behavior of the server:
Notice that all the URLs go with request /products/ where as onlt the main route URL should be passed like that
By "this behaviour" I am assuming that you mean the stylesheets/images not being loaded properly.
This is because in your HTML page (or rather the .ejs template file), you are putting a document relative URLs for loading them. For eg.:
<img src="images/xyz.png" />
whereas, these should be made absolute URIs:
<img src="/images/xyz.png" />
Alternatively, you can use the <base> tag in your <head> node:
<base href="/">
Currently I'm building a webApp and I'd like to create a link to have direct access to a specific user, city or company. For example:
myapp.com/cityName
myapp.com/user321
myapp.com/BusinessName
I can set the proper name, id, or whatever the param is. But the problem is when I try to access this state or other page, they have conflict. For example, if I try to go to the homepage, which has this configuration:
.state('home', {
url: '/Welcome',
//..other configs
})
The router try to get the url as a param and send the user to the page of the company, user or city.
Is there a way to achieve this result?
Edit:
Currently, to avoid this conflict, I'm using my routing like this:
.state('city', {
url: '/City/:cityName',
//..other configs
})
But I'd like, if possible, to use like this:
.state('city', {
url: '/:cityName',
//..other configs
})
Because I want users to be able to access the page by typing the name direct on the url.
If I understand you correctly you probably want something like this.
.state('home', {
url: '/welcome',
//..other configs
})
.state('cities', {
url: '/cities/:parameter'
})
This way you remove the conflict.
Update: You could also make an array with excluded parameters, if the parameter is not in the excluded list, redirect to a different state.
.state('home', {
url: '/:slug',
//..other configs
})
.state('cities', {
url: '/cities/:slug'
})
var excludedWords = ['welcome', 'homepage'];
$rootScope.on('$stateChangeStart', function(event) {
if(excludedWords.indexOf($stateParams.slug) !== -1) {
event.preventDefault();
$state.go('cities', $stateParams);
}
});
This way, if a user enters /welcome, he/she won't get redirected to the /cities/welcome page, but if he/she enters /newyork he/she will be redirected to /cities/newyork
I have this routing configuration in app.js:
$stateProvider.state('home', {
url: '/',
views:
{
'contentView':
{
templateUrl:'modules/login/login.html',
controller:'loginCtrl'
}
},
data:
{
login: true
}
});
Whenever user hits the browser with URL http://.../MyClient/#/?param=ParamValue.
It will take the user to the login page and I am able to access the param value as well.
There is a logout button in the successive pages and after logout, I want to redirect to the initial URL and if I try something like
$location.path('/#/?param=ParamValue');
the user will stay on the same page and URL will be like this:
http://.../MyClient/#/%23/%3Fparam=ParamValue
Please let me know how to fix this.
You should try to use the $state service to navigate between your states, $state.go('home', {param: ParamValue})
also add the parameter you need in the url template for the state.
$stateProvider.state('home', {
url: '/?param',
views:
{ ....
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#state-1
i have a view page in which i have to load different views according to the option selected in a selecbox. But my problem is that the url to which ajax request is sent is not correct.
The correct path to be formatted is like this http://pc12/cakephp/users/getView but the ajax request goes to http://pc12/users/getview. What is my problem here?? My code is below:
jQuery('#ptype').change(function(){
var param = "id="+jQuery(this).val();
jQuery.ajax({
type: "POST",
url: "/users/getView",
data: param,
dataType: "text",
success: function(data){
if(data) jQuery('#profile_info').html(data); }
});
});
write complete address:
/AppName/Controller/Action/
you can use firebug for debug any ajax requests. it's very helpful.
Problem is the first front slash as I think.
url: "**/**users/getView",
in url: remove the first front slash(/) before users and it will work fine. I am using the same format without any problem. It will be like.
url: "users/getView",
it is easy and clear to use than your replacement: Html->url(array('controller' => 'users', 'action' => 'getView')); ?>