Discovering the final segment of a URL using AngularJS

Question

Discovering the final segment of a URL using AngularJS

Is there a way to create a function in AngularJS that can check the last segment of a URL?

Here are some examples:

#/menu1/123/edit

#/menu2/444/create/new

#/menu3/submenu1/333/create/new

#/menu4/submenu2/subsubmenu1/subsubsubmenu1/543/edit

The key points here are:

123, 444, 333, and 543 are IDs generated externally outside of Angular

The goal is to validate the last segments of the URLs: /edit or /create/new.

The length of the URL may vary (depending on the number of slashes inside).

In my Angular controller, I have code to retrieve the URL:

.controller('urlCtrl', ['$scope', '$rootScope', '$location', function ($scope, $rootScope, $location) {

    $rootScope.location = $location;
    $scope.hashPath = "#" + $rootScope.location.path().toString();
}]);

I'm appending the # symbol to the URL for comparison with JSON later on.

I attempted this proposed solution without success (tried other solutions from the thread as well).

Any insights or suggestions?

EDIT:

Alternatively, how can we specifically check for edit or create within the URL?

My approach so far is:

var path = $location.path();
var multisearch = path.search(/create|edit|new/);
console.log("multisearch: " + multisearch);

javascript angularjs url

Answer 1

Answer №1

Here is the code snippet that will provide the outcome you are looking for:

window.alert(window.location.href.substr(window.location.href.lastIndexOf('/') + 1));

To retrieve the current URL, simply utilize: window.location.href Afterwards, extract the portion following the final '/' character.

Answer 2

Here is the code snippet that will provide the outcome you are looking for:

window.alert(window.location.href.substr(window.location.href.lastIndexOf('/') + 1));

To retrieve the current URL, simply utilize: window.location.href Afterwards, extract the portion following the final '/' character.

Answer 3

Answer №2

A more streamlined approach:

const getLastDirectory = () => {
  return location.pathname.split('/').slice(-1)[0];
}

For example, in the URL

http://example.com/firstdir/seconddir/thirddir?queryparams#hash

, this function will return thirddir.

The pathname variable stores everything after the domain name and before any query parameters.
Using split breaks up the URL into an array separated by forward slashes (/).
slice extracts only the last item in the array.
Finally, accessing index [0] returns this last item as a string rather than an element of an array.

Answer 4

A more streamlined approach:

const getLastDirectory = () => {
  return location.pathname.split('/').slice(-1)[0];
}

For example, in the URL

http://example.com/firstdir/seconddir/thirddir?queryparams#hash

, this function will return thirddir.

The pathname variable stores everything after the domain name and before any query parameters.
Using split breaks up the URL into an array separated by forward slashes (/).
slice extracts only the last item in the array.
Finally, accessing index [0] returns this last item as a string rather than an element of an array.

Discovering the final segment of a URL using AngularJS

Answer №1

Answer №2

Similar questions

The AngularJS element fails to display on the screen

The ZIP file downloaded from NodeJS is corrupted and cannot be opened

How to implement a form in PHP that doesn't refresh the page upon submission

What is the best way to make one div show that another div is being toggled in a slideshow display?

Creating mathematical formulas in JavaScript

In React js, automatically insert a new row into a table once the Dialog window has

Having trouble receiving a JSON array after making an Ajax request

Implement a unique combination of texture and color on a cube using three.js

What is the process for downloading and installing angular-cli on a Windows 7 operating system

Choose a specific element based on the content of its href attribute

three.js canvas, sphere rotates gracefully to the right

Issue with caching: Browser cache not being utilized even after implementing Cache-Control Header

Issue with THREE.meshphongmaterial: Causing Objects to Appear Black

The element type is not valid: it should be a string for built-in components or a class/function for composite components, but it is currently an object in a React project

Unlocking the potential of the Route component within the children of the useRoutes hook

Difficulty encountered when attempting to modify textures in three.js

Which approach yields better performance: setting all dom events simultaneously, or incrementally?

Use jQuery or javascript to eliminate the 'Webpage Dialog' from the 'showModalDialog' window

Error API0005 has occurred due to an invalid signature connection when trying to establish a connection between Google Apps Script

Manipulating object information within a nested for loop