Angular - Incorporating Query Parameters into URL

Question

Angular - Incorporating Query Parameters into URL

For instance, let's say I have the following URL: http://local.com/. When I invoke the function in my SearchController, I aim to set text=searchtext and generate a URL like this:

http://local.com/?text=searchtext

.

Is there a way to achieve this? I attempted using

$location.search('text', 'value');

but ended up with the URL:

http://local.com/#/?text=searchtext

$scope.searchTracks = function() {

    Search.search.get($scope.params, function(data) {
        /** Set params in query string */
        $location.path('/').search('text', $scope.text);       
        }
    );
}

javascript angularjs

Answer 1

Answer №1

To remove the #/ from the URL, you need to configure html5mode in your module's settings.

For more information, check out the AngularJS guide on using $location.

You may also consider setting reloadOnSearch to false in your route configuration if you prefer not to reload your controller/route when changing the query parameter.

Here's an example:

angular.module('myApp', []).config(function($locationProvider, $routeProvider) {
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix('!');
      $routeProvider.when('/', {
           /*{other route options here}*/
           reloadOnSearch: false
      });
});

Answer 2

To remove the #/ from the URL, you need to configure html5mode in your module's settings.

For more information, check out the AngularJS guide on using $location.

You may also consider setting reloadOnSearch to false in your route configuration if you prefer not to reload your controller/route when changing the query parameter.

Here's an example:

angular.module('myApp', []).config(function($locationProvider, $routeProvider) {
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix('!');
      $routeProvider.when('/', {
           /*{other route options here}*/
           reloadOnSearch: false
      });
});

Angular - Incorporating Query Parameters into URL

Answer №1

Similar questions

What steps can I take to allow a third-party JavaScript to access my TypeScript object?

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

Can express-handlebars tags be utilized within an HTML script tag when on the client side?

Error Message: Undefined Constructor for Firebase Google Authentication

I am having trouble unzipping the file

The spacing of the numbers in Highcharts is too cramped

Align the headers of columns to the right in the AgGrid widget

Check if the provided arguments in JavaScript are arrays and, if they are, combine them into a single large array

Discover multiple keys within a new Map object

Player script does not contain a valid function signature according to XCDYouTubeKit

An issue occurred during compilation with 1 error: The required dependency could not be located

Generate a new object from the contents of a div

Storing an array within an AngularJS service for better performance

Is there a way to update the background dynamically?

Discovering the initial vacant row within an HTML table with Javascript

Dynamic options can now be accessed and modified using newly computed getters and setters

When nodemon is executed, it encounters an "Error: Cannot find module" issue, indicating that it may be searching in the incorrect directory

The Vue plugin encountered an issue with an error message stating "Uncaught SyntaxError: Unexpected token

Using Node Express.js to access variables from routes declared in separate files

Managing state in React for a nested object while still maintaining the data type of the