Consider the script below:
$stateProvider
.state('search', {
url: '/search?query',
})
;
$urlRouterProvider.otherwise("search");
Upon accessing the page
base_url?query=x
The redirection leads to
base_url/search
However, the query parameter is not retained.
Is there a method to include the query parameter with the otherwise function?
Behold, a functional plunker can be found here
The UI-Router provides a built-in solution for this scenario.
Remember, the
otherwisedoesn't have to be just a "url" string—it has versatility as a function too.
Witness it in action by checking out this insightful Q & A:
How to maintain current URL when displaying a 404 error page with ui-router
Your code snippet could take on a similar form:
$urlRouterProvider.otherwise(function($injector, $location){
var state = $injector.get('$state');
state.go("search", $location.search()); // leveraging { query: ... }
return $location.path();
});
By tapping into $location.search(), we obtain a params object that may resemble: { query: ... }. This allows us to smoothly redirect to the search state with these parameters...
Experience it firsthand right here
Forget about using injector and $state.go, it's unnecessary. The otherwise method can take a URL path as an argument, allowing you to include parameters within it.
In this specific scenario, the following code will redirect you to base_url/search?query=x
$urlRouterProvider.otherwise("/search?query=x");
Alternatively, you can pass a function as the argument that generates a dynamic URL path based on certain criteria. If unsure about the parameters, you can extract them from $location, format them into a URL-like string, and return the result.
$urlRouterProvider.otherwise(function($injector, $location) {
var params = $location.search()
// convert params to 'p1=v1&p2=v2' format
var formatted = Object.keys(params).map(function(key) {
return key + '=' + params[key]
}).join('&')
return '/search?' + formatted
});
I need help running a JavaScript file within my Angular application every time I initiate ng build. Specifically, the script should be executed prior to the build process to ensure that its changes are reflected in the final build. The JavaScript file, na ...
Having trouble with the scrolly directive in my div. When the user scrolls down to the end of the div, I want to call a function. However, I'm getting 'undefined' when using Scope.$apply function. Can anyone help me out? Thanks in advance! H ...
Essentially, I have 3 checkboxes. When a button is clicked and the box is checked, each checkbox has a boolean that turns to true. But, is it possible to perform an action when unchecking a checkbox without needing another button to trigger an event first ...
In my current project, I am integrating Google Maps using ReactJS and Redux. However, whenever I interact with the map like clicking on a marker or zooming in, the entire map refreshes and turns gray before redrawing the same map with the marker. Even aft ...
Issue Description I am attempting to create an array utilizing the keys() and .map() techniques, based on a preexisting array with a length of arrLength, so that only elements at positions which are multiples of step are produced. See the example below, ...
Lately, I've been working on streamlining my Protractor e2e tests using the Page Object model for better reusability. Each Page Object typically starts with defining elements on that page followed by local functions. Here's an example: 'use ...
I recently started learning AngularJs and have been following the Oreilly AngularJS book. I was able to successfully run this code with Angular version 1.0.8, but it doesn't work with newer versions of Angular. Can someone tell me why? <!DOCTYPE h ...
I am trying to create an animation for an element that moves to the left when hovered over, but the code I thought was correct doesn't seem to be working in my fiddle. Here is the link to the fiddle I created: https://jsfiddle.net/feb8rdwp/3/ Based ...
I've managed to make the GET example work, however, I'm having issues with 'doSave' for POST. Am I missing something here? $scope.obj1 = $resource('http://localhost:port/srv/:id', {port: '\:8080&ap ...
Encountering an error with newUser this.userObj.assigned_to.push(newUser);, receiving argument of type 'any' is not assignable to parameter of type 'never' typescript solution Looking for a way to declare newUser to resolve the error. ...
Looking for advice on creating a navigable menu using Foundation's "top-bar" component in an HTML template file with Spring MVC + thymeleaf. The menu bar appears but the sub-menus are not displaying when hovering over them. Sub-menus related to main ...
I'm currently in the process of enhancing an angularjs directive to integrate it into my angular component. I have successfully set up the hybrid (ng1 + ng2) environment and have also managed to inject angularjs services into Angular and utilize them ...
I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...
When the form is submitted, I would like to add a class and display a loading animation before executing the AJAX request. However, when setting async to false in the AJAX call, the AJAX request will be executed first before displaying the loading animatio ...
I am faced with a JSON containing two keys, "cars" and "others". How can I implement a toggling feature on my website using HTML/CSS/JavaScript such that: Clicking on "cars" displays the car items (small vehicle, large vehicle) in red text. Clicking on "o ...
Take a look at the simple demonstration below. It showcases a div element that will disappear when clicked. <div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;"> function toggle2(e) { var textx = (e.targe ...
Within my side navbar, I have a dropdown menu with sub-menus for each option. My directory structure is as follows: RBS | +-- All php files are located here |--one.php |--two.php | +-- css | | | +-- all css files are stored here | + ...
I customized my checkboxes using the icheck plugin to work with both single and multiple checkboxes, including a "Check all" option. Here is an example of how it looks in HTML: HTML : <div>Using Check all function</div> <div id="action" c ...
While using the Chrome Driver to test a webpage, I typically have no issues. However, there are times when exceptions occur: org.openqa.selenium.UnhandledAlertException: unexpected alert open (Session info: chrome=38.0.2125.111) (Driver info: chromedri ...
My server side script outputs results in a txt file, where the values stored look like this: 1 2 5 7 10 In order to create a real-time progress bar, I need to fetch the last value from the file using an ajax request while updating the txt file with the l ...