Using AngularJS location.path for unique custom URLs

Control Code:

$scope.$on('$locationChangeStart', function () {

var path = $location.path();
var adminPath = '/admin/' ;

if(path.match(adminPath)) {

  $scope.adminContainer= function() {
    return true;
  };

});

HTML

<div class="container" ng-show="adminContainer()">
 <div ui-view></div>
</div>

The code currently detects the URL matching http://localhost/angapp/#/login, but now I have additional admin URLs like below

http://localhost/angapp/#/admin/users
http://localhost/angapp/#/admin/usersGrp
http://localhost/angapp/#/admin/XYX

I want to dynamically match any URL that starts with /admin/ followed by a specific module name and display the appropriate HTML.

How can I utilize location.path() to detect Admin URLs and show/hide the div accordingly?

javascriptangularjsurl

Answer №1

An easy solution would be to check if the URL contains the keyword "admin" and then toggle a boolean variable to control the visibility of div elements.

For example:


if ($location.absUrl().split('?')[0].match('admin')) {
    $scope.showDiv = true;
} else {    
    $scope.showDiv = false;
}

Then you can use the following code for the div:

<div ng-show="showDiv"></div>

or

<div ng-hide="showDiv"></div>

However, it is important to note that relying solely on URLs for security purposes may not be sufficient. It is advisable to explore other methods for authentication and authorization. You may find the following links helpful:

  1. https://www.sitepoint.com/implementing-authentication-angular-applications/

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

Using jQuery to toggle between open and closed states upon clicking

I've been working on a script that allows me to expand an element when clicked, change its content, and then minimize it again with another click Here's the jQuery code I came up with: $(".servicereadmore").click(function () { $('.myin ...

javascriptjquery

I'm encountering an issue with Regex.test

When working with the following JavaScript code... $.post(url, data, function (json) { var patt = new RegExp('/^\[{"dID":/'); if (patt.test(json)) { //output json results formatted } else { //error so o ...

javascriptjsonregex

Attempting to utilize express-load in conjunction with express 4

As a beginner in NodeJS, I encountered a problem with my code. Let me show you the issue. I am trying to load the application in the MVC pattern using express-load, but I am facing an error when defining the load order. Here is the important part of app. ...

javascriptnode.jsexpress

A method for modifying the key within a nested array object and then outputting the updated array object

Suppose I have an array called arr1 and an object named arr2 containing a nested array called config. If the key in the object from arr1 matches with an id within the nested config and further within the questions array, then replace that key (in the arr1 ...

javascriptarraystypescriptloopsobject

The lite-server package from npm seems to be ignoring any updates made to the CSS files

I'm currently working on the Angular 2 tour of heroes tutorial application. I have run into an issue where even though I am compiling my SASS files to generate CSS, the lite-server does not recognize this change and therefore does not refresh the brow ...

angularjsnpmlivereloadnode-sassnpm-install

How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

I am utilizing a Backbone Marionette composite view in which each child item view contains its own form. var DependentsFormFields = Backbone.Marionette.CompositeView.extend({ template: 'dependents_form_fields_wrapper', itemViewContainer: ...

javascriptjquerybackbone.jsmarionette

Struggling to implement .indexOf() in conjunction with .filter()

Hello, I'm new to JavaScript and ES6. Currently, I am working on a react-native app that utilizes Firebase and Redux. One of my action creators acts as a search bar function to fetch data from Firebase. Here's the code I have so far: export cons ...

javascriptecmascript-6indexof

Issue encountered when attempting to invoke a service from an Angular component within an office.js dialog

Our application utilizes Angular 5 and integrates Office.js to interact with Microsoft Office Word documents. Step 1: We use office displayDialogAsync to load the component. Step 2: Inside the attribute-users component, an HTTPS GET request is made to re ...

javascriptangularoffice-jsangular-servicesangular-httpclient

Encountering an ASP.NET Boilerplate Angular Project Issue during npm start

I am utilizing the ASP.NET Boilerplate Framework which is built on .Net Core and Angular. I closely followed the guidelines outlined in this page for the startup template with Angular, but upon running npm start, I encountered the following error message: ...

angularjsnpmasp.net-coreaspnetboilerplate

Configuring Vuex State

Currently, I have a prop that is being bound to a child component. My goal is to eliminate this binding and instead assign the value to a data property in a vuex global state. <VideoPip :asset="asset" v-show="pipEnabled === true" /&g ...

javascriptvue.jsstatevuex

The issue of Next.js redux useSelector causing HTML inconsistency

Currently, I am utilizing Next.js for the development of a React application. In order to manage the state, I have integrated redux along with redux-toolkit. A peculiar error has surfaced in the console with the message: Warning: Did not expect server H ...

javascriptreactjsreact-reduxnext.jsredux-toolkit

Error: undefined property causing inability to convert to lowercase

I am encountering an error that seems to be stemming from the jQuery framework. When I attempt to load a select list on document ready, I keep getting this error without being able to identify the root cause. Interestingly, it works perfectly fine for the ...

javascriptjqueryajax

As the user types, the DD/MM/YYYY format will automatically be recognized in the

In my React component, I have an input box meant for entering a date of birth. The requirement is to automatically insert a / after each relevant section, like 30/03/2017 I am looking for something similar to this concept, but for date of birth instead of ...

javascriptreactjsinputecmascript-6

Avoid repeatedly invoking an API within a loop

Is there a way to continuously call an API every 2 seconds within a loop? var itemArray = ['apple', 'banana', 'orange']; for (var i = 0; i < itemArray.length; i++) { $timeout(makeApiCall(itemArray[i]), 2000); } functi ...

angularjs

Disable reloading when submitting and reset input fields after submission

I am working on developing a website where users can post things and comments without the need to refresh the page. I have encountered some issues while implementing this feature and need some assistance with it. My goal is to allow users to submit comment ...

javascriptphphtmljqueryajax

How to redefine TypeScript module export definitions

I recently installed a plugin that comes with type definitions. declare module 'autobind-decorator' { const autobind: ClassDecorator & MethodDecorator; export default autobind; } However, I realized that the type definition was incorrec ...

javascripttypescripttypescript-typings

Creating a complex user interface in Angular using multiple nested views with the help of Angular

Exploring the nested views functionality of the ui-router plugin has presented me with a challenge that I am struggling to resolve. The problematic code can be accessed at this link: http://jsfiddle.net/3c9h7/1/ var app = angular.module('myApp&apos ...

angularjsangular-ui-router

The functionality of a progressive web application while offline is experiencing issues when using Angular Js 1.5.x

In my pursuit to develop a progressive web app using Angular 1.5 with the assistance of Gulp, I have implemented a service worker (sw.js) using the sw-precache module in npm. Below is an excerpt from my index.html: <!doctype html> <!-- ...

angularjsservice-worker

Ways to remove all HTML elements from a string

Check out the code that I currently have: I am looking for a way to prevent users from entering any HTML tags in the "Add Responsibilities" field. For example, if a user enters the following: <div>Test</div> It should only display the text l ...

javascriptjqueryhtml

The Ubuntu virtual machine hosted on Google Cloud is experiencing difficulties connecting through Node.js using an external IP address

const express = require('express'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); app.listen(3000, function(){ console.log('Server is now live on port 3000' ...

javascriptnode.jsexpressnpmgoogle-cloud-platform