The AngularJS application appears to have trouble accessing a local text file, even when it is deployed on

Within the same directory of my application deployed on IIS, there are 4 files:

  1. home.html
  2. Angular.js
  3. data.txt
  4. web.config (Automatically generated by IIS for default document)

I am looking to display the content of 'data.txt' on 'home.html'. You can see the code running at [Plunker][1]

The 'home.html' file contains the following code:

<!DOCTYPE html>
  <html>
 <head>
<title>nitin</title>
<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">
    var nameSpace = angular.module("app", []);
    nameSpace.controller("GuitarFunction", function ($scope) {});
  </script>
 </head>
 <body ng-app="app">
 <div ng-controller="GuitarFunction">     
    <ng-include src="'data.txt'">
    </ng-include>
 </div>
</body>
</html>

http://plnkr.co/edit/8aBJsqzV07AweDk4PAcG?p=preview

Answer №1

In order for a website to be accessible online, it must be hosted on a web server such as IIS or Apache to enable access over http/https protocols.

Browser security features will block scripts from loading external resources if the file protocol (file://) is used.

For instance, if you have hosted a web application at C:\webapp on port 5000 using IIS, you should direct your browser to http://localhost:5000/index.html rather than accessing it directly from the file path C:\webapp\index.html.

Answer №2

In order to make the necessary changes in the web.config file for your website, you will need to add an overwrite if there is no server code present. This overwrite simply serves as the name of the application like below:

<?xml version="1.0" encoding="utf-8"?>
 <configuration>
<system.webServer>
  <handlers>
       <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
  </handlers>
  <rewrite>
       <rules>
            <rule name="DynamicContent">
                 <conditions>
                      <add input="{{REQUEST_FILENAME}}" matchType="IsFile" negate="True"/>
                 </conditions>
                 <action type="Rewrite" url="server.js"/>
            </rule>
       </rules>
  </rewrite>     

Ensure that these changes are made accordingly in order for your website to function properly.

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

Establishing a universal function within Ionic AngularJS

I have the following code snippet, where I have added a reset function that I want to be able to use from ng-click in any part of any template. angular.module('starter', ['ionic', 'starter.controllers', 'starter.services ...

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...

Utilize Web3.js to interact with a specific function in a deployed smart contract on the Ethereum blockchain from a React application

I am attempting to execute the transferMargin() function from the Synthetix Contract on Optimism Kovan using react/javascript (web3.js) and Metamask. I am encountering an issue where I am unable to successfully trigger the transferMargin function upon a Bu ...

Issue with setting state in useEffect causing an infinite loop due to either linter warning or user error

In its current state, my component appears as follows: const { listOfStuff = [{name:"john"},{name:"smith"}] } = props const [peopleNames, setPeopleNames] = useState([]) useEffect(() => { listOfStuff.forEach(userName => { setPeopleNames(people ...

voting-app-powered-by-express-angular-node

Here are my two files for a simple voting app, but I'm facing an issue where the buttons are not increasing the count immediately. The counts only increase by one when the voting.html page is refreshed. Any assistance would be greatly appreciated. &l ...

What is the process for configuring environmental variables within my client-side code?

Is there a reliable method to set a different key based on whether we are in development or production environments when working with client-side programs that lack an inherent runtime environment? Appreciate any suggestions! ...

Ways to utilize $document within a Modal

I'm struggling to utilize the $document in the modals controller. Is there a proper way to pass it in? Just using document is not allowed according to our Angular project guidelines. How I call the modal: var modalInstance = $uibModal.open({ t ...

JavaScript code may fail to load on initial page load

My JavaScript function utilizes ajax and is triggered when a button is clicked. Oddly, the function works perfectly if you visit the page for a second time, but fails to work on the first visit. I've attempted to include window.onload, document.onlo ...

jQuery $.ajax problem encountered

When working with AngularJS, we have the ability to catch errors using the $http() service as shown below: return $http(defaultConfig).then(sendResponseData)**.catch(errorCallBack)**; On the other hand, when attempting to do something similar in jQuery: ...

Having issues with regEX functionality in an Angular form

I need to validate a phone number using regEX. My criteria is as follows: 10 digits alpha/numeric, where an Alpha CHAR is in the 4th position (excluding hyphens). For example: 586R410056  NNN ANN NNNN  (NNN) ANN NNNN  NNN-ANN-NNNN  (NNN) AN ...

Creating rows within a table in React.js using the map method: Techniques to follow

Here is my code snippet: const [tasks, setTasks] = useState(''); I am simulating data with a mock server. function fetchTasks() { axios.get('http://localhost:4000/tasks') .then(function (response) { ...

Mongoose makes sure that duplicate rows are not repeated in the database

I'm working with a basic mongoose schema definition below: const mongoose = require('mongoose'); const followSchema = new mongoose.Schema({ follower: { type: mongoose.Schema.Types.ObjectId, ref: 'User', ...

Using Ajax and jQuery to fetch information from a previous search query

I'm currently utilizing Ajax and jQuery for my chat feature. Some may find it overly complex, but as long as it works, that's all that matters. It's functioning properly on the first friend result, however, not on the others. The issue lies ...

I'm facing an issue in React where using onChange is causing all DOM elements to be cleared. The input form functions correctly when used with a button, but for some reason, the onChange event does not

Currently, I'm working on a grid that can be resized using two input fields in the application. The setup involves an input for cells across, an input for cells down, and a button to set the grid, which is functioning well. However, I would like to ma ...

The power of Angular controllers lies in their ability to facilitate two-way

Currently, I have a controller that acts as a wrapper for ui-router and manages its flow, similar to a menu bar. When a user clicks on a menu item, a function is triggered that changes the ui-router state and broadcasts an event to the inner controllers. E ...

Using Mongoose to calculate and retrieve the total sum of elements within an array

In the following schema, I have defined the structure: let postScheme = new Schema({ title: { type: String, required: true }, body: String, isImage: Boolean, imageUrl: String, icon: String, time: { type: ...

Is there a way to implement a react component into an HTML file?

I initially created a web page using pure JS, CSS, and Django. Feeling quite ineffective, I decided to try using React JS instead. However, upon making a simple React component, I encountered a problem - I wasn't sure how to incorporate this component ...

Changing the style of opening curly braces in JavaScript code styling

I have a piece of JavaScript code written for Vue that I would like to discuss. It is common practice in the JavaScript world to place the opening curly brace at the end of a line of code. <script> export default { name: 'newUser', data ...

Guide to sending a post request in Node.js using Mongoose

I recently tried to follow a tutorial (https://medium.com/weekly-webtips/building-restful-apis-with-node-js-and-express-a9f648219f5b) from 2 years ago to build an API. However, I'm struggling to update the code to work with more recent changes in the ...

Using Node.js for HTML redirections involves creating routes and setting

I am currently attempting to connect my Node.js API with my HTML pages. For the most part, everything is functioning correctly, but I have encountered some confusion along the way. Is there a more efficient method for redirecting an HTML page? Typically, ...