I am trying to use routeProvider to create a search page. Below I have something like so:
}).when("/search/:value", {
templateUrl: "app/views/search/search.html"
What I want to show in the url is not
/search/searchValue
but more like
/search/value=searchValue
I am setting the location as so:
$location.path('/search/').search({ value: $scope.filterValue }); where $scope.filterValue is the searchValue.
When I use this, I'm not able to view my page due to the :value. How can i change the url to the one I want as in you have the routeParam show in the url link?
Thanks,
All I had to do was use /search/?. The value after the "?" was the parameter.
Related
I have a page for editing existing pages by populating input forms and creating a JSON file for the page template/partial.
Essentially, it consists of: <input ng-model="model.page_title" /> and $http.post('edit_json_file.php', JSON.stringify(model))
However, to edit a page I need to load its (existing) JSON first, so that I can populate those models for input forms. I'm doing that with another input:
<input ng-model="url_of_page_to_edit" />
This clearly requires the user to manually type the URL of existing page (to load corresponding JSON file) for its modification. I want to change that.
It would be better to have an Edit button on each page that I want to edit. After clicking the button it should redirect me to my page editor, which will load the required JSON and fill in the inputs as usual. For that I need to know which JSON to load (if the page is /page.html, JSON will be page.json). That's why I'm thinking of passing URL as a parameter to my page editor, for example as:
website.com/edit_pages?url=page_to_edit
or as
website.com/edit_pages/page_to_edit
Assuming I have these links, what is the best practice to retrieve those URLs?
I am using ui.router and so my config has something like this:
$stateProvider.
state("editPages", {
title: "Edit",
url: "/edit_pages",
templateUrl: "/partials/edit_pages.html",
controller: "editPagesCtrl"
})
I still want to edit pages by manually typing their URLs
If I need to use $stateParams with a link in form of /edit_pages/page_to_edit then how do I handle an empty case /edit_pages/?
If I need to pass URLs as parameters (like in PHP) in a form /edit_pages?url=page_to_edit/ then what do I need to change in my config for this to work?
Getting the Page Link
var url = $state.href($state.current.name, $state.params, {absolute: true})
This will give the absolute url of the current page. Then you can do a $location("edit_pages?url="+url).
Passing URL as Query String
For passing in query string format (PHP format) you cause something like this:
.state('editPages', {
url: "/edit_pages?url",
...
})
Then /edit_pages?url=page_to_edit will work as expected.
After clicking a button make use of $state.go();
put a mapping(if required) and depends on the input entered change the state.
$state.go('editPages')
I'm using Angular's UI-router. All my routes looks like that:
/:name/....
for example /:name/test/:id, /:name/logs, /:name/list/:id
I want to change the name part when I click on a button, and reload the page. How can i do that globally without knowing exactly what route I'm in ?
$state.go($state.current, { name, 'newValue' });
Or something similar with ui-sref.
I have a state defined something like this:
$stateProvider.state("app.search", {
url: "/search?q",
templateUrl: "App/Search.html",
controller: "SearchController as vm",
});
When I want to navigate to the search page and specify a search term, I can do something like this:
$location.path("search").search({ q: "stuff" });
Which effective resolves to a url along the lines of #/search?q=stuff. If I then change the search term to "things", the search page correctly reactivates and searches as expected.
However, I'd like to be able to specify "random" querystring parameters which have not been defined in my url, and then have those parameters also reload the state. (Note: this is why I'm using $location.path instead of $state.go to change the URL). So for example, if I was searching for food, my URL may be:
#/search?q=stuff&type=food
And then I may be filtering on spice levels, which may change the URL to:
#/search?q=stuff&type=food&spice=medium
(etc).
The problem though, is that since I haven't defined all the other query string parameters (type and spice in this example), ui-router doesn't reload my page.
I can't use $state.go with { reload: true } because it ignores the unspecified parameters.
Is there a way I can trigger a page reload using "unspecified" querystring parameters? This post suggests I can make the route /search* but that doesn't appear to work for me.
I haven't found a nice way to do this yet with ui-router. If you're willing to sacrifice your integrity a little bit you could utilize an alternate format for your query params. You can use a single http url query param object and list all your criteria using a custom format.
e.g.
/search/q?stuff:type=food:spice=cinnamon
The route setup would look like:
$stateProvider.state("app.search", {
url: "/search?q",
templateUrl: "App/Search.html",
controller: "SearchController as vm",
});
and to navigate with the extra parameters:
$state.go('app.dashboard', { q: 'stuff:type=dessert:spice=cinnamon'});
to access the parameters on the route:
$state.params.q
You can then just parse out the 'stuff' value and then each name/value pair that was passed in.
PS> I'm not sure whether the colon (:) separator is valid but it was used to illustrate the proposed idea.
Making a verify account page and want to be able to pass an email and auth code via url like so:
https://mywebsite.com/verify?email=a#a.com&code=1234
It looks like I can't do it this way in angular. And should instead be done like this:
https://mywebsite.com/verify/:email/:code
And use $stateParams to grab the vars.
Can you have two different URLs trigger the same state? So both URLs below trigger the same state and the controller checks for the vars and does it's magic.
https://mywebsite.com/verify
https://mywebsite.com/verify/:email/:code
You can set the configuration as like below and you can pass the param which is required to send for the url
$stateProvider.state('verify', {
url: '/verify?email&code',
templateUrl: 'verify.html',
controller: 'verifyCtrl'
});
working fiddle: http://plnkr.co/edit/AwHkFj?p=preview
Rather than defining the params email and code as path parameters, you could use search parameters and access them via $routeParams.
e.g, your route would be:
$routeProvider.when('/verify', routeConfig);
the URL would be:
https://mywebsite.com/verify?email=a#a.com&code=1234
And in the controller, you would inject $routeParams and access via:
$routeParams[email]; // = a#a.com
$routeParams[code]; // = 1234
For more info on $routeParams, see https://docs.angularjs.org/api/ngRoute/service/$routeParams
I have an action called search on a controller called categories. /categories/search
I also have this route in place:
Router::connect(
'/search',
array('controller'=>'categories','action'=>'search')
);
So the URL is /search instead of /categories/search
I have a form set to get for that url:
$form->create(
NULL,
array(
'type'=>'get',
'url'=>array('controller'=>'categories','action'=>'search')
)
);
This form contains 1 input field named q and when you submit it the URL you are taken to looks just like this:
/search?q=your+search+terms
The problem is this would play much nicer with other parts of the application if it were a passedArg instead of a get var. So the URL would look like this:
/search/q:your%20search%20terms
Is there anyway to set the form to post like this?
first, the router:
Router::connect('/search', array('controller'=>'categories','action'=>'search'));
Router::connect('/search/*', array('controller'=>'categories','action'=>'search'));
You can use redirect to have the pretty url:
function search(){
if(!empty($this->params['url']['q'])){
$this->redirect(array('q'=>$this->params['url']['q']));
}else if(!empty($this->params['named']){
// search here
}
}
This will never work without a JS hack because named parameters are part of the URL.
The form's target url is static, and won't be modified by the contents of an input field.
You can do this with a JS hack though, but isn't very nice.