Angular can invoke various controller methods based on different URLs

In my single page application, the footer features various links such as About, FAQs, Privacy, and more. As of now, I am using angular-strap modal to display a modal for each link. The code snippet looks like this:

 <li>
     <a href="#about" id="about" 
     data-modal-class="my_modal gradient-body"
     data-bs-modal="'templates/about.html'">About
     </a>
 </li>

Currently, clicking on the About link does not change the URL of my application, it simply opens the modal popup. However, I would like to maintain the same functionality while also having a URL structure like mydomain.com/#about to directly open the about box.

To achieve this, I am using $routeProvider to define routes in the following manner:

 $routeProvider
    .when('/home', {
      templateUrl: 'templates/map.html'      
    })
    .when('/verify/:code',{
      template : " ",
      controller : 'VerifyReportCtrl'
    })    
    .otherwise({ redirectTo: '/home' });

The main reason for making this change is to improve the SEO of my application since currently there is no way to index the content of the About page.

Answer №1

Revise your pathway like this

 $routeProvider
    .when('/start', {
      templateUrl: 'templates/map.html'      
    })
    .when('/verify/:key',{
      template : " ",
      controller : 'PreapproveCtrl'
    })    
    .when('/info',{
      template : "templates/about.html "
    })  
    .otherwise({ redirectTo: '/home' });

Update HTML as follows

 <li>
     <a href="#info" id="info" 
     data-modal-class="my_modal gradient-body">Info
     </a>
 </li>

Upon clicking the anchor tag, the URL will appear as mywebsite.com/#info

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

axios is refusing to update or be uninstalled

Despite my efforts to update the axios package, it stubbornly refuses to upgrade to the latest version. I'm currently running a node server using pm2 I've attempted the following: npm uninstall axios npm i axios and even npm update axios ...

loop through the links using their unique identifiers

Here is my current code in Jade/Pug: #pm_language.dropdown(aria-haspopup='true', aria-expanded='false') button#langbutton.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown') Lang [RU] ...

MSW is not effective when utilized in functions within certain contexts

Trying to intercept a post request using MSW for result mocking. A handleLogin function is located within a context, but MSW cannot recognize handleLogin as a function. An error occurs: ReferenceError: handleLogin is not a function. If the API call is made ...

Refresh the navigation bar on vuejs post-login

Creating a client login using Vue has been a challenge for me. My main component includes the navigation bar and the content rendering component. The navigation component checks if the user is logged in to display the buttons for guests and hide the button ...

Exploring the benefits of looping with node.js require()

Currently, I have defined the required files as shown below. constantPath = './config/file/' fileAA = require(path.resolve(constantPath + 'A-A')), fileBB = require(path.resolve(constantPath + 'B-B')), fileCC = require(path.r ...

The function react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV(...) is not recognized

For my react-redux project, I utilized json-server as the server for managing orders. The status of each order is saved in the state within UiReducer and is then accessed in the "OrderStatusPage". The current NODE_ENV configuration is set to "development". ...

Passing an empty JSON object through Ajax requests

To Whom it May Concern (I am simply attempting to meet the "please add more detail" requirement) Upon sending data to the server as shown below, the body appears empty. Server // Route for POST method app.post('/pass', function (req, res) { ...

Unveiling the secrets of leveraging Vue Router global navigation guard to efficiently verify multiple conditions

Within a Vue 3 application utilizing Pinia, my objective is to accomplish the following: Direct a user to the sign-in page when authentication is not verified. Direct a user to a verification page if authenticated but not yet verified. Direct a user to th ...

What is the best location for implementing role-based authentication in a MeanJS application?

I am working with a meanJS starter template that includes a yeoman generator. I'm trying to figure out where I can add specific permissions to my modules. For example, 'use strict'; // Configuring the Articles module angular.module(' ...

Arrange items in a particular order

I need help sorting the object below by name. The desired order is 1)balloon 2)term 3)instalment. loanAdjustmentList = [ { "description": "Restructure Option", "name": "instalment", " ...

WebStorm not recognizing NodeJS Core Modules in External Libraries

As a newcomer to NodeJS and WebStorm, I am currently diving into a tutorial on creating an Express app. In the tutorial, the instructor always gets prompted with "Configure NodeJS Core Module Sources" including the URL nodeJS.org when creating a new NodeJ ...

What steps are needed to successfully enable the callback function within the addFilter method from @wordpress/hooks while customizing the tables in WooCommerce analytics reports?

I've been diving into customizing Analytics reports tables for clients on our WooCommerce platform. I followed a guide at this link, but encountered an issue with the JavaScript file. After adding the filter at the end of the file as instructed, noth ...

Extract information from a database table for presentation as simple text

I am looking to extract information from each row and display it as plain text on the same page within a paragraph. Here is an example table for reference: <table> <thead> <tr> <th class="a header">A</th ...

Contrast objects and incorporate elements that are different

In my scenario, I have a list of days where employees are scheduled to work. However, on the website, I need to display the remaining days as leave. In cases where an employee has two different shifts, there can be two elements in the object. var WorkDays ...

Is there a method to programmatically identify enterprise mode in IE11?

Is it possible to detect Internet Explorer 11 Enterprise mode programmatically? This would involve detecting at the server side using C# or JavaScript/jQuery. The discussion on the following thread has not reached a conclusive answer: IE 11 - Is there a ...

What is the reason behind the android code being incompatible with IOS operating systems?

I'm encountering an issue where a particular code is working on Android, but not on IOS. The code in question involves using JavaScript to differentiate the items in a list within an HTML select tag. It's perplexing to me how the code can operat ...

The rollup-plugin-typescript is unable to identify the 'lib' option within the 'compilerOptions'

Currently, I'm following a tutorial on how to create an npm package. The tutorial can be found here. Here is the content of my tsconfig.json file: { "compilerOptions": { "target": "es5", "module": "es2015", "sourceMap": tr ...

The Socket IO server fails to broadcast a message to a designated custom room

I am currently working on developing a lobby system that allows players to invite each other using Socket io version 4. The process involves the client sending a request to create and join a room, followed by emitting messages to other clients in the same ...

Is there a vanilla JavaScript alternative to using jQuery's document on click event for handling link clicks?

Does a standalone JavaScript version of this exist? document.addEventListener('click', function(event) { event.preventDefault(); here.change(this); }); I am specifically interested in adding event listeners to any dynamically created links, ...

Passport.js implementation in a Next.js application does not persist the user's login state when navigating between routes

I'm currently utilizing passport.js with the local-strategy for authentication in my next.js application. Data store requests and authentication are functioning properly. However, I need access to the req.user in another route to retrieve the users._ ...