Set up AngularJS routing for accessing the Web API endpoint

I have encountered an issue with my AngularJS application and Asp.net Web Api. Both applications are hosted on port 80 of the IIS server. The problem arises when the web api URL cannot be accessed due to angularjs routing redirecting API calls to the root of the application.

AngularJS Routing

.when('/home', {
    templateUrl: baseUrl + 'home.html',
       controller: 'homeCtrl'
    })
    .otherwise({
       redirectTo: '/' //This redirection causes the web api call to redirect to the root of the web app 
    });

Is it possible to configure the angular routing method in a way that allows Web Api requests to run as expected?

EDITED

I have implemented some rewrite rules in my wb.conf file:

<rule name="RemoveTrailingSlash" stopProcessing="true">
                            <match url="(.*)/$" />
                            <conditions>
                              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                            </conditions>
                            <action type="Redirect" redirectType="Permanent" url="{R:1}" />
                          </rule>   

                          (More rewrite rules go here...)

Answer №1

My issue was quickly resolved by implementing the following new rewrite rule:

<rule name="Fixing AngularJS URLs" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(webApi)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>

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

Expand and enhance your content with the Vue Sidebar Menu plugin

Recently, I integrated a side-bar-menu utilizing . My goal is to have a sidebar menu that pushes its content when it expands. Any suggestions on which props or styles I should incorporate to achieve this effect? Below is my Vue code: <template> ...

Unlocking the Potential of Checkbox Values in AngularJS

I am attempting to extract data from a $rootScope object that has been linked to the checkboxes. HTML: <tr ng-repeat="system_history in SystemHistoryResponse.system_history"> <td><input type="checkbox" ng-model="versionValues[system_histor ...

The image is not appearing in my small AngularJS application

I have developed a small application that converts Fahrenheit to Celsius and I am trying to display a relevant image based on the Fahrenheit temperature input. However, I am facing difficulties in getting the image to display correctly. Can someone please ...

Avoid losing any entered form information when leaving the page

As I work on creating a datagrid with hundreds of rows, each row features a checkbox that allows users to select items from the grid. I've noticed that users might spend considerable time filtering and searching through the grid, ticking checkboxes a ...

Tips for creating a JSON file using C#:

I am looking to save the following information into a text file utilizing JSON format through C#. It is crucial to include brackets for the JSON data to be valid: [ { "Id": 1, "SSN": 123, "Message": "whatever" }, { "Id": 2, "SSN": ...

Is there a way to make Bootstrap 5 load its jQuery plugins right away, rather than waiting for DOMContentLoaded?

After migrating to Bootstrap 5, I noticed that the following code is broken: <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-prot ...

ReactJs - The pagination feature in MaterialTable is malfunctioning, it is not displaying the correct

I am currently utilizing the Material-table plugin. It successfully displays the data, however, I am facing issues with Pagination and Row per Page dropdown functionality. When trying to click on the next button or select a number of rows, nothing happens. ...

Issue with passing reactive property to component in Vue 3 application

I am currently working on a Vue 3 application and I am in the process of setting up a store for state management. Within this application, I have several important files that play different roles: app.vue component.vue main.js store.js These files contai ...

What is the process for extracting a cookie from response headers using AngularJS?

On my Node server, I have set a cookie using the following code: res.cookie('userValidation','true',{httpOnly: false, secure: false }); Now, I am trying to access this cookie in AngularJS. https://i.sstatic.net/DWTT5.jpg Does anyone ...

A common challenge in React is aligning the button and input line on the same level

I'm currently working on a React page where I have an input field and a button. My goal is to align the bottom edge of the button with the bottom line of the input. Here's the code snippet I have: `<form className='button-container'& ...

Problem with UV mapping when adjusting texture size

I am currently working on an application to modify minecraft models. To display the drawn texture mapped on the 3D player model, I am using ThreeJS. However, I'm facing a challenge related to changing the texture size. Initially, the texture is mappe ...

After updating React and Next.js to the latest versions, encountering a re-hydration error when refreshing a page? Looking for possible solutions to resolve this issue?

Encountered an unexpected Runtime Error Error: The hydration process failed because the initial UI does not align with the server-rendered content <div> <p> Gender : <span >{gender}</sp ...

Minimize/Maximize Swagger Response Model Class View

After successfully integrating Swagger API documentation with my rest services, I encountered a challenge. The Swagger page appears too lengthy due to the numerous response classes in my project, requiring users to scroll extensively to find information. ...

AngularJS HTTP call response

Below is a snippet of my code: var object = null app.controller("controller",function($scope,service){ $scope.search=function(){ service.findData().then( function successCallback(response){ object = response.data ...

Determining the page's coordinates in ColdFusion

Whenever I use iframes or frames on older websites, I implement an additional security measure using a JavaScript function: <SCRIPT LANGUAGE="JavaScript1.1"> if (top == self) self.location.href = "../index.cfm"; </SCRIPT> I also include an ...

Transferring information from JavaScript to PHP

I am trying to send both the data and text that are within a single DIV tag using JavaScript into PHP values. However, I am encountering an issue with the following code: <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jq ...

All you need to know about the AngularJS Toggle functionality

I am a beginner in AngularJS and I have adapted jQuery code into a directive. When I click on one of the numbers, it toggles an action. Can someone please assist me with this? Here is my code on jsfiddle angular.module('app', []) .directive ...

Reacting to the surprise of TS/JS async function behaving differently than anticipated

It appears that I'm facing a challenge with the small method; not sure if my brain is refusing to cooperate or what's going on. async fetchContacts() { await this.http.get('http://localhost:3000/contacts') .subscribe(res =& ...

The jspdf tool tries to cram my extensive data into a single page, resulting in an overcrowded and barely visible PDF document

My PDF generated using Jspdf is being forced to fit in one page, making it difficult to see all the data because there is a huge amount of information present. To view the issue, please visit this link: https://jsfiddle.net/frost000/04qt7gsm/21/ var pdf ...

Clicking on ng-click can lead to the dissociation of the Angular factory

My situation involves a factory with a series of prototypes that need to call each other. The issue arises when the reference to "this" is mistakenly applied to the html template instead of the original factory class when using ng-click. For example: ang ...