Accessing parameters at the beginning of the state URL in AngularJS using UI-Router

My frontend web application is entirely written in HTML5/JavaScript, with the MVC being managed by AngularJS framework using UI-Router.

Now, I am faced with the challenge of managing multiple customers with a single application following this pattern:

  • Each customer has an applicationName (System.String)
  • The URL to access the application is [domain]/:applicationName/[view state] such as: or

Therefore, in the config function of Angular's bootstrap file, I need to implement something like this:

.state('home.dashboard', {
     url: '/:applicationName/home/dashboard',
     templateUrl: '/views/contents/dashboard.html'
});

The main issue here is that the applicationName serves as a unique identifier to retrieve the corresponding applicationId (System.Guid) stored in the database. This applicationId is essential for retrieving the data related to the applicationName and is used in all requests.

Hence, my question is: before resolving the state URL, can I fetch the applicationName, make a request to a REST API to obtain the corresponding applicationId, store it in an Angular service, and then proceed to the state?

Is this approach feasible? If so, how can I achieve this?

Thank you very much!

Lorenzo

Answer №1

One effective way to retrieve the application Name from a Database is by utilizing the $locationChangeStart event within the app run function. By creating a service or provider that can access the Database, you can easily fetch and display the desired information.

        app.run(["$rootScope", "$location", "$window",function ($rootScope, $location, $window){
             $rootScope.$on("$locationChangeStart", function (event, next, current) {
                 alert($location.$$path);

             });

        }])

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

Creating an Angular ngFor directive with no data source. Let's construct the iterable to make it

When using *ngFor in Angular 2+, you can create an array of n elements to build the iterable (rows) like this: <table> <tr *ngFor="let row of rows"> </tr> </table> Is it possible to iterate over a number directly? Any suggest ...

The JavaScript setTimeout function not triggering repetitively for 10 instances

I'm facing an issue with a JavaScript/jQuery function that is designed to call itself multiple times if there is no available data. This is determined by making a web service call. However, the logging inside the web service indicates that it is only ...

What could be the reason for my Node.js Express response coming back as empty?

While working on a registration system, I have encountered an issue. When errors occur in the form, I receive the correct error messages. However, when a user with the same email attempts to register and triggers 'res.json({error: 'email exists& ...

Develop a MySQL table using AJAX and HTML within a Cordova application

I've been developing an app using Cordova and I'm looking to create a feature where users can create and join different rooms to perform various actions. Despite trying multiple tutorials and scouring the internet, I'm struggling to understa ...

How to Implement Infinite Scrolling in Ionic Framework Using HTTP Requests

Recently, I started using the amazing ionic framework and I am new to angular. I have a web service up and running, and my app is supposed to load data. I have succeeded in retrieving data, however, the WordPress rest API sends data in the form of pages. I ...

Preloading dynamic banner images for image carousel from external API prior to application launch in AngularJS

Is there a way to save banner images from a remote API whenever an angular application initiates, and then keep these banner images stored in the root scope variable for easy access across all controller scopes? ...

The $http service factory in Angular is causing a duplication of calls

After creating an angular factory that utilizes the $http service, I encountered a problem where the HTTP request is being made twice when checking the network tab in the browser. Factory: app.factory('myService', function ($http, $q) { var de ...

Tips for handling multiple ajax requests simultaneously on a single webpage

In my quest to create an 'ajaxified' user interface with multiple ajax calls for handling tasks such as creating, renaming, and deleting elements on the page, I initially struggled with organizing the "code behind" ajax pages. I started off by cr ...

The property 'hasClass' cannot be retrieved from an undefined or null reference

I'm currently utilizing the AngularJS framework and implementing 'hasClass' within jQuery to create a dropdown on mouse over. The functionality works smoothly in Chrome and Firefox, but I encounter an error in IE stating "Unable to get Prope ...

What is the best way to retrieve the canonicalized minimum and maximum values within the beforeShow method of jQuery UI's datepicker?

I have a pair of datepicker elements that I want to function as a range. When a value is set in the "low" datepicker, it should adjust the minDate and yearRange in the other datepicker, and vice versa with the "high" datepicker. The challenge I'm faci ...

Toggle the Dropdowns and Submit Buttons on and off

I'm working on creating a web application that requires specific validation rules. When the page initially loads, I want only a single dropdown select box to be enabled while the rest of the elements like textboxes and buttons remain disabled. Once an ...

What is causing the browser action popup for my Chrome extension to not appear?

Here is the content of my manifest.json file: { "browser_action" : { "default_icon" : "Assets/Chromium logosu.png", "default_popup" : "main.html" }, "description ...

Using jQuery in Rails 3 to display the id of a td element

I am working with a 3x3 table that contains td elements with unique id's (id='a1'...id='c3'). I want to enable the user to click on any of these 9 td elements and receive an alert displaying the id of the clicked td. Below is my C ...

Modify the Viewbox to encompass an svg component

Currently, I am working on creating a map using SVG where users can zoom into a specific area within the SVG, such as a state or country. I came across a helpful tutorial that demonstrates this functionality along with animation. The tutorial can be found ...

Troubleshooting problem with binding and calling jQuery javascript functions

I created a custom JavaScript function called 'mc_change' and I want it to be triggered when a textbox's value changes. <input type="text" id="mc_val" onchange="javascript:mc_change();" /> Unfortunately, the function is not working ...

The background image of my bootstrap carousel is not responsive to changes in the browser window size

Hey there, I'm new to the world of programming and currently working on a project to create the front end of my personal website. I've opted to utilize a bootstrap carousel background image slider in my index.html file. However, I've noticed ...

Retrieving headers and query parameters from a WebView in Nativescript

Currently, I'm developing a mobile app using Nativescript and have integrated a WebView on the main page for logging in with Spotify. Post-login, I need to extract headers/query params from the WebView page. Is this achievable? If so, how can I go abo ...

What is the basic structure of a JSON-like object?

How can data be effectively stored in a JSON-like structure? I have noticed two different approaches to storing data within a json object, each with its own method for accessing the data (illustrated using examples in Python): Approach 1: obj1 = [ {" ...

Validating dates using JQuery within a specific range of dates

Users can input a date within a specified range in an input field. To enable this feature, I created a new method using the jQuery validator object: $.validator.addMethod("dateRange", function(value, element, from, to){ try { var date = new D ...

The distinction lies in whether the function is called directly within the ng-click attribute or is delayed until after the DOM has

Having an issue with AngularJS, I wanted to inquire about the difference between these two methods: angular.element(document).ready(function () { $scope.callFunction(); }); and <a href="#" ng-click="callFunction()"></a> When modifying a ...