The ng-app feature is causing the script to run endlessly

Currently, I am troubleshooting an issue within my angular application that is built on the asp.net web application empty template. The problem arises when I utilize ng-app; if I leave it blank, the $routeProvider fails to initialize. However, if I specify ng-app="myApp" with my module name, the body content begins to repeat in an infinite loop. I know this must be a simple oversight on my part, but this dilemma has been quite frustrating for me. Thank you for any assistance you can provide.

Below is the snippet of my HTML code:

This is the main section

<a href="#/view1">View 1</a>

<div>
    <div ng-view></div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>

And here is myApp's code:

(function () {
    'use strict';

    var app = angular.module('myApp', ['ngRoute']);

    app.config([
        '$routeProvider', function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'index.html',
                controller: 'main'
            }).when('/view1', {
                templateUrl: 'view1.html',
                controller: 'main'
            }).otherwise({
                redirectTo: '/'
            });
        }
    ]);

    app.controller('main', function ($scope) {
        setTimeout(function() {
            alert("From set");
        },10000);
    });
})();

Answer №1

The issue at hand is that the index.html file shouldn't be the template to load into the ng-app. It serves as the outer shell page. By loading the entire application within itself repeatedly, you end up with a structure like this:

<a href="#/view1">view1</a>

<div>
  <a href="#/view1">view1</a>

  <div>
    <a href="#/view1">view1</a>

    <div>
      <a href="#/view1">view1</a>

      <div>
        //... more content being loaded here
      </div>
      <script src="Scripts/angular.js"></script>
      <script src="Scripts/angular-route.js"></script>
      <script src="app.js"></script>
    </div>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="app.js"></script>
  </div>
  <script src="Scripts/angular.js"></script>
  <script src="Scripts/angular-route.js"></script>
  <script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>

This cycle goes on indefinitely.

The recommended approach is to load only templates in your routes instead.

Answer №2

Does your main route display the page within itself?

    $routeProvider.when('/', {
        templateUrl: 'index.html', <----- ???
        controller: 'main'
    })

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 animated time-based scrollable bar chart in javascript

As someone who is new to JavaScript and charting, I am seeking assistance with a specific task. Despite browsing various JavaScript charting libraries and examples, none seem to address my issue: My goal is to generate dynamic stacked bar charts, as depic ...

Ways to guarantee that a function runs prior to a console.log in Mongoose

I've created a function called findUser that I'm working on implementing using sails, MongoDb, and mongoose. Here's what the function looks like: findUser(userId); function findUser(user_id){ User.findOne({ _id: user_id ...

Using the application router in Next.js to implement getServerSideProps()

I recently delved into utilizing Next.js 13 with the App Router, but encountered some challenges. The structure of my test application is as follows: ---/school ------/app ------/layout.tsx ------/page.tsx ---/src The ./app/page.tsx code snippet is ...

Breaking up ui-router state definitions into separate modules

In my endeavor to structure an Angular application based on features/modules rather than types, I have encountered difficulties in modularizing state definitions for ui-route. I have segmented my app into modules app.core, app.company, app.products. Inste ...

A guide on converting HTML and CSS to a PDF file using JavaScript

I'm facing a challenge where I need to create a custom quote in pdf using data retrieved in JavaScript and sent in HTML. However, the issue is that no library supports CSS for the PDF generation process. After some research, I came across HTML2CANVAS ...

Tips for avoiding the forward slash in a URL parameter

$.ajax({ url: "/api/v1/cases/annotations/" + case_id + "/" + encodeURIComponent(current_plink), When I use encodeURIComponent to escape slashes, it doesn't work as expected. The code converts the "slash" to "%2F", but Apache doesn't reco ...

Updating meta tags dynamically in Angular Universal with content changes

Hello, I'm encountering an issue with a dynamic blog page. I am trying to update meta tags using data fetched from the page. Here's the code snippet: getBlogPost() { this.http.get(...) .subscribe(result => { this.blogPost = re ...

Implementing authentication fallback during re-login when a session expires in a web application built with React, Node.js, and Mariadb database

Greetings everyone, this is my debut post here so kindly bear with me :D. Currently, I am in the process of developing a social app where I am incorporating a fallback mechanism for situations when my database goes offline. Within my Login.jsx component, I ...

Implementing a file download feature in Python when clicking on a hyperlink

I'm attempting to click on the href link below. href="javascript:;" <div class="xlsdownload"> <a id="downloadOCTable" download="data-download.csv" href="javascript:;" onclick=&q ...

Visualizing JSON data in React.js using Chart.js

Currently, as a beginner in ReactJS, I am working on an application that displays COVID-19 data from a JSON API in a visual format using Chart.js. However, despite trying various solutions, I am unable to visualize the data. Below is my source code: App ...

Explore a variety of images within an array using Gatsby and Markdown documents

After spending more than 6 hours on this, I've decided to call it quits for today. However, I'm hoping someone out there might have a solution. The problem at hand is as follows: I'm trying to include an array of images in a Markdown file t ...

What is the best way to incorporate JavaScript code as React syntax?

For my project, I am using the OpenLayers API Map. I'm unsure of the correct way to incorporate JavaScript code in React or vice versa. Here is an answer on how to use markers in the map, but I am struggling to implement it in my current code since I ...

Facing compatibility issues with ng-view on Microsoft Edge

While testing my application on Microsoft Edge, I encountered an error: app.config( function ($routeProvider) { $routeProvider. when('/logout', { template: '<logout-page></logout-page>&a ...

Is the process of adding a new row by duplicating an already existing row dynamic?

I've encountered an issue where a row in a table is not being displayed because the CSS style has been set to display:none. Here's the HTML table: <table class="myTable"> <tr class="prototype"> ........ </tr> </ ...

Having numerous calls to isNaN within a JavaScript if-else statement

I've created a JavaScript function that generates div elements and styles them based on user input values. However, I'm facing an issue when trying to display a warning message if the input is not a number. Currently, I'm unable to create th ...

Using Angular Material to alter the value of ng-model in the user interface

here is my perspective <section class="custom-design" layout-padding> <div layout="row"> <md-input-container flex="33"> <label>First Name</label> <input ng-model="firstna ...

The browser fails to render an EJS-generated page when responding to a Fetch request

Today, I encountered a strange issue that has left me puzzled. In summary, I have been sending a PUT request from a user form to the backend. Since forms do not natively support PUT/DELETE requests, I had to use a script to handle this task for me. let for ...

Having trouble loading JSON data in your ExtJS Tabpanel?

I have a tabpanel set up with two panels, and I am fetching data via JSON. The data retrieval works perfectly in the first tabpanel, but I'm facing issues parsing the JSON data in the second tabpanel. Any suggestions on how to approach this? var regi ...

Using the ng-class directive, you can dynamically apply a specific class based on the value

I utilized angular to display content based on selected values from a dropdown. Now, I am looking to dynamically add a class to a div when specific values are chosen. Essentially, I want to apply certain CSS classes to a div depending on the selection mad ...

Mapping routes in ExpressJS

I am interested in developing a programmatic route generator. Within my project, I have a module called ./utils/crud.js structured as follows: const express = require('express'); const router = express.Router(); module.exports = function (Mode ...