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]