The Angular single-page application ensures that the navigation bar continues to highlight the corresponding section based on the current URL

In my Angular SPA application, the main routing navigation highlights the correct heading. Now, I need it to highlight as active when a specific link is clicked that contains a "5" in the URL.

For example, if the URL is:

http://srpdop03/doc-home/#/coordinators

The navbar background is highlighted with white color using this code snippet:

<li ng-class="{ active: isActive('/coordinators')}"><a href="#/coordinators">Coordinators</a></li>

When clicking on a News link on the Coordinators page, the URL changes to:

http://srpdop03/doc-home/#/tips/5?paginatePage=1

If the URL contains /tips/5, the Coordinators navigation should stay active.

Is there a way to easily read the URL within the index.html SPA app and target a specific part of the URL?

/tips/5    

The current ng-controller code in index.html looks like this:

[Code Snippet from index.html]

And here's the controller code from app.js:

[Code Snippet from app.js]

I came across this article which might be helpful:

The jQuery code mentioned in the article is not directly applicable to my Angular SPA. I'm exploring ways to adapt similar functionality without using jQuery.

[Custom solution implementation]

Answer №1

Include ui-router as a dependency.

If you want to highlight the active state in your navigation menus, ui-router is the way to go. The documentation states that ui router's directive is mainly used for "simplifying the appearance of navigation menus based on ui-sref. It ensures that the 'active' state's menu button looks different, making it stand out from inactive menu items."

You can follow this basic setup:

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,
$urlRouterProvider,) {

  // Add your routes here

}]);


<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'anyone'})" href="/users/anyone">anyone</a>
  </li>
</ul>

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

Is the sudden disconnection from Chrome after a WebSocket handshake related to a domain mismatch or is it possibly a bug in Chrome?

I created my own WebSocket server using Python, but I encountered an issue where Chrome 4.0.249.78 dev (36714) always disconnects after the handshake process. Wanting to rule out any issues with my code, I tested it using the WebSocket server from , only t ...

The request response was a JSON object that started with the keyword "POST"

My frustration is growing as I encounter a strange issue with the stack template I purchased from envato market. Every time I attempt a simple ajax request, the json returned from my PHP script seems to be invalid. Interestingly, the exact same code works ...

Can someone please provide me with the correct syntax for a jQuery AJAX PUT request that is JSON encoded?

Here is the ajax PUT request that I have written: jQuery.ajax({ url: url_lab_data+"backend/read/{\"f_anid\":"+anid+"}", type: "PUT", data: JSON.stringify({"read": 1}), ...

Combining both inline and block positioning for div content

My goal with applying CSS styles is to create a visually appealing composition of content: https://i.sstatic.net/CpVXb.png After applying my styles, I received the following result: https://i.sstatic.net/Bfh5q.jpg li { position: relative; list-styl ...

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

What is the reason behind the restriction on retrieving data from an API within the constructor of a React Component?

After conducting thorough research, it has come to my attention that fetching data in the constructor of a React component can lead to potential issues. I am seeking a detailed explanation with examples illustrating the specific troubles that may arise f ...

Challenges with the "//" syntax in UNIX

$('#lang_choice1').each(function () { var lang = $(this).val(); $('#lang_files').empty(); $.ajax({ type: "POST", url: '< ...

I am having trouble accessing the props testHighlight from the parent component when using the componentDidMount and componentWillReceiveProps methods

I'm brand new to working with react and I'm currently attempting to integrate react-highlight-words into my application for text searching purposes. I've set up a basic search textbox within the SearchBar.js file, while the highlighter compo ...

What is the best way to handle .jsx files in my library bundling process with Rollup?

Currently, I am in the process of developing a component library using storybook and rollup. Here is the configuration file rollup.config.mjs /* eslint-disable import/no-extraneous-dependencies */ import peerDepsExternal from 'rollup-plugin-peer-deps- ...

Issue with Laravel: Scripts and image sources are not functioning properly in layouts when utilizing URLs with prefixes

Path Route::group(array('before' => 'guest'), function() { // landing page Route::get('/', array('uses' => 'HomeController@home', 'as' => 'home')); Route::get(&apo ...

Is there a way I can obtain the code for a message box?

When I refer to a message box, I am talking about a container that gives users the ability to input their text and access different features like BOLD, ITALIC, color, justify, etc., in order to customize their message's appearance! (Think of it as the ...

Is it possible to create a jQuery animation that toggles from top to bottom with a 'slow' speed setting?

I recently implemented a hidden div appearing/disappearing animation in my code using jQuery's toggle('slow'). The current effect makes the div expand from the upper left corner to the bottom right corner. Is there a way to modify the anima ...

The issue of the v-list-item-title text color remaining static in v-navigation-drawer when active has been noted

I'm currently working on developing an application using the Vuetify framework. I've encountered an issue while trying to modify the CSS properties of v-list-item. The main problem arises when an item is active, as everything seems to work fine ...

I am unable to activate Wicket's onchange event

I've been trying to automate the population of three dropdown selection elements using a Chrome extension. I'm able to change the value of the first dropdown, but it doesn't trigger the necessary action that populates the second and third dr ...

Issues with Bootstrap Table Column Widths not Adjusting Properly

I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than ex ...

jQuery AJAX request delivering duplicate data

My jQuery ajax call is loading some elements into a div, but I am facing an issue where it returns duplicated responses. Instead of getting two elements as expected, I receive four (the 2 correct items, duplicated once). Below is the code snippet of my aj ...

Subsequent jquery functions fail to work following a smooth ajax operation

MODIFY JQUERY-AJAX REQUEST CODE: <script type="text/javascript"> $(document).ready(function(){ $(".form").submit( function(e) { e.preventDefault(); var form = $(this); var div_add_comment = $(form).parent(); var div_comments = $(div ...

Issue with triggering submit handler twice in React JS

Just starting out with React and I'm trying to create a submit form in a modal, but I'm facing an issue. The form includes a textbox and multiple checkboxes (array object). When I check one of these checkboxes, it should add a new key (IsChecked ...

Tips for showing data from Ajax responses on an HTML page

In my code, there are two JavaScript functions: The function fetch_items is responsible for returning data in the form of stringvalue. On the other hand, the function extract_items($arr) passes values to the fetch_items function. function fetch_items ...

When the dropdown menu is displayed, apply a class to the parent <li> element's

Encountering a frustrating problem where I'm trying to assign a class to an li a when its submenu is visible. However, the class is being added to all li a elements, including those in the submenu. <ul id="nav"> <li><a href="#" tar ...