Navigating using hash sign in Angular Routing is a common practice

I am facing an issue with the # sign in Angular routing. I have navigation links that should not have a leading slash, like this:

<li class="active"><a href="/"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="#services"> УСЛУГИ</a></li>

Scrollspy does not work if I use <a href="#/services">.
However, there is now an issue with Angular routing set up as follows:

config(["$routeProvider", function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: '/templates/home.html',
                controller: 'smu72Controller'
            })
            .when('/objects', {
                templateUrl: '/templates/objects.html',
                controller: 'smu72Controller'
            })
            .when('/object/:Id', {
                templateUrl: '/templates/object.html',
                controller: 'smu72Controller'
            })
        .otherwise({
            redirectTo: "/"
        });

What changes should I make to the routing (or scrollspy) configuration to be able to use these navigation links for both scrollspy and angular routing purposes?

javascriptangularjsangular-routing

Answer №1

Eliminate the need for the # symbol in your route by leveraging the $locationProvider module

config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/templates/home.html',
            controller: 'smu72Controller'
        })
        .when('/objects', {
            templateUrl: '/templates/objects.html',
            controller: 'smu72Controller'
        })
        .when('/object/:Id', {
            templateUrl: '/templates/object.html',
            controller: 'smu72Controller'
        })
        .otherwise({
            redirectTo: "/"
        });

        // Enable the usage of HTML5 History API
        $locationProvider.html5Mode(true);
}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving the complete URL on the Login Page within Shopify

I've been working on a feature where users are redirected to different URLs based on the page they click the login button on. For example, I have a registration page and a regular page, both with a login button. When a user clicks the login button on ...

javascripthtmlshopifyhttp-redirectliquid

Submitting AngularJS data to SQL Server

Having a slight issue with my post php file. Managed to get it to post to the database, but struggling to retrieve the player name from angularjs. $scope.addPlayer = function (playerName){ alert(playerName); $http.post("insert.php",{'Name&a ...

phpmysqlangularjsdatabasepost

Exploring the functionality of ui-grid when implemented within another directive

I've been working on developing a directive that will not only set specific configurations to ui-grid but also add some additional functionality to it. I have managed to get a basic version up and running, but the challenge lies in passing the jasmine ...

angularjsunit-testingangularjs-directivejasmineangular-ui

Solving the AngularJS promise from a Factory method

I have a factory object with a getProduct(id) function defined. Here is the code: angular.module('app') .factory('productFactory', ['$http', 'URL', function($http, URL){ var urlBase = URL.APISERVER; ...

angularjsangular-ui-routerangular-promiseangularjs-factory

Choosing a table row in ReactIn React, you can

I am currently facing an issue with selecting only one row at a time in my React Material App. The problem I am encountering is that multiple rows are being highlighted instead of just one. My goal is to highlight/select only a single row at any given time ...

javascriptreactjsecmascript-6material-ui

What is the best way to utilize class labels?

I've encountered an issue I need help with. There are two lists of options in play here. One list has names all starting with 'M', and the other with 'R'. The task is to select specific options, like 'A' and 'C&apos ...

javascriptclassinputnamesgetelementsbyclassname

javascript write a custom slice function

Can anyone explain the inner workings of the array.slice method? I'm attempting to create a custom function that retrieves a portion of an array without relying on slice. function customSlice(array, start, stop) { for (let i = start; i <= stop; i ...

javascriptarraysslice

ERROR: The $http service is not defined in the angular controller.js file

Just starting out with angular js The code is: controller.js var my = angular.module('my',[]); my.controller('AppCtrl',['$scope',function ($scope , $http){ console.log("hello world from controller"); $http.get(&a ...

angularjsmean

I'm curious why I need to add an extra await in my Vue.js unit test whenever multiple calls are made to my Firebase auth mock

In my vue.js application with firebase authentication, I encountered an issue while testing the Login.vue component. To mock firebase auth, I had to simulate the configuration file used for initializing firebase (named firebase.config). It's worth men ...

javascriptvue.jsfirebase-authenticationjestjsvue-test-utils

Is there a way to create a clickable component for triggering an AJAX call without using a Submit button?

Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...

javascriptjqueryhtmlajax

Encountered an error while web crawling in JavaScript: Error - Connection timeout

I encountered an error while following a tutorial on web crawling using JavaScript. When I execute the script, I receive the following errors: Visiting page https://arstechnica.com/ testcrawl ...

javascriptnode.jsnpmweb-crawler

Unable to retrieve the width of an `element` using Angular's built-in jQuery method

I'm attempting to retrieve the width of an element using the AngularJS link method, but I'm not seeing the expected result. Here's my code: var myApp = angular.module("myApp", ['ngResource']); myApp.factory("server", function($r ...

jqueryangularjs

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

javascriptjqueryhtmlcss

Error connecting to MongoDB database (URI parameter)

i encountered the following error: ** MongooseError: The uri parameter to openUri() must be a string, got "object". Make sure the first parameter to mongoose.connect() or mongoose.createConnection() is a string. ** Please assist me in resolvin ...

javascriptnode.jsmongodbmongoose

Angular $resource request results in a 401 error during a PUT request if CSRF is not defined, while a GET request with CSRF defined results in a 404 error

Currently facing a challenge with updating a list. I am working with Rails and AngularJS. On the JavaScript side, I integrated jQueryUI for sortable feature along with Angular $resource to interact with and manipulate a text block in a specific order. Fo ...

ruby-on-railsjquery-uiangularjs

I'm looking for a streamlined method to simultaneously access multiple APIs with GraphQL and React

For my client side project, I'm using GraphQL and React but opting not to use Redux for state management. Instead, I have organized my API calls into custom hook files as shown below: const [getSomeData, { data: getSomeDataData, loading: getSomeData ...

javascriptreactjsoptimizationgraphqlfetch

Encountering an issue with resolving the module - Material-UI

I am encountering an issue when trying to import a component from 'Material-Ui'. I am currently working with React and Webpack. My goal is to utilize the "Card" component (http://www.material-ui.com/#/components/card). The import statement for C ...

javascriptreactjswebpackmaterial-ui

Problem detected in id modification

My JavaScript function is triggered with an onChange event, which works fine when there's only one. <input class="form-control" type="text" onchange="opert(<?php echo $fetch["id_prod"] ?>,1)" id="name" value="<?php echo $fetch["name_prod" ...

javascriptarrays

Guide to Displaying Google Maps with Custom Markers Following an Ajax Response

In this program, the goal is to retrieve JSON (long/lat) data from a web service, insert the received data into markers, and display a Google map with those markers. Despite attempting various strategies, such as placing Ajax calls in different locations ...

javascriptjquerygoogle-maps

Is it possible to submit a POST method without using a form?

I am looking to create a button that functions similar to the "Follow" buttons found on social networks. The challenge I face is that I need to refresh the page when the user clicks the button, as the content of the page heavily depends on whether the user ...

javascript