Error: excessive recursion detected in <div ng-view="" class="ng-scope">

I've recently started learning angularJS and I've encountered an error that I need help with. Below is my index.html file:

<body ng-app="myApp">
    <div ng-view></div>
    <a href="table">click</a>

    <script src="./libs/angular.js"></script>
    <script src="./libs/angular-route.js"></script>
    <script src="./scripts/myscript.js"></script>
</body>

And here is my script file:

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

app.config(['$routeProvider',function($routeProvider){
    console.log("i am routeprovider");
    $routeProvider.when('/',{
        templateUrl:"index.html"
    }).when('/table',{
        templateUrl:"..//views//firstview.html"
    }).otherwise({
        redirectTo: 'google.com'
    })

}])

When running index.html on my local server, I'm seeing the following error in the console:

InternalError: too much recursion
Stack trace:
[object Object]
 <div ng-view="" class="ng-scope">

Please take a look at the attached image for reference:

https://i.stack.imgur.com/H8mY5.png

I would appreciate any assistance in resolving this issue.

Answer №1

This issue arises because the templateUrl is set to index.html, which also happens to be the parent template.

When Angular tries to load the route '/', it injects the index.html template into the container <div ng-view></div>. However, since the injected template also contains an ng-view container, Angular gets stuck in a loop of continuously loading the same page.

To resolve this problem, you need to define a different partial view for the templateUrl, such as defaultview.html.

Example:

$routeProvider.when('/',{
    templateUrl:"..//views//defaultview.html"
}).when('/table',{
    templateUrl:"..//views//firstview.html"
}).otherwise({
    redirectTo: '/'
})

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

ajax with names that are alike

I've set up a text input field that searches for file names on my server. However, it currently requires an exact match to display the file. I'm looking for a solution that can show me files even if the input text isn't an exact match. Here ...

Tips for formatting the return Date when utilizing the setDate() method

I set the end of the week to be the upcoming weekend using the following code snippet this.weekEnd = new Date(this.currentDate.setDate(end)); Now, my goal is to update the weekEnd by adding 7 days to it. I attempted to achieve this as shown below, however ...

Development of client and server using socket.io in node.js

I am trying to set up a basic demo using socket.io from http://socket.io The server (app.js) is functioning properly. However, I am encountering issues with the client side: <script src="/socket.io/socket.io.js"></script> <script ...

What is the best way to adjust the screen to display the toggle element when it is opened?

Here is the code I'm currently using to create a toggle button that shows or hides extra content when clicked: $(".toggle .button").click(function() { $(this).next().slideToggle('fast'); }); The issue I am encountering is that if t ...

What are some ways I can effectively implement Tanstack Query's useMutation function?

I am trying to implement useMutation similar to useQuery in my code. However, I encountered an issue where the data is returning as undefined and isError is false. Can anyone help me understand why this is happening and how I can resolve it? `import { us ...

Develop an exclusive "click-once" button for a webpage

Can anyone assist me in creating a "one-time clickable" button to launch my website? I've searched through numerous threads on Stack Overflow but haven't found a solution yet. ...

Tips for avoiding template errors when retrieving data using Nuxt's fetch() method

After transitioning my vue app to a nuxt app, I encountered an issue with vue-slick-corousel. In the original vue app, everything worked smoothly with vue-slick-carousel, but after making the necessary modifications for nuxt, the carousel wouldn't dis ...

Automatically add values after successful Facebook login

Currently, I am working on a Cordova project where I have implemented Facebook login for user authentication. While the login is functioning correctly, I am facing an issue where I need to manually press a button with the ID getinfo in order for the values ...

Issues with passing information from a child component to a parent component in a

Currently, I am developing a guessing game that involves questions and selection logic embedded in a component known as Questions. However, I am facing issues with App not being able to read the Questions code correctly. My objective is to have the state i ...

Adding numbers to a textbox using a JavaScript algorithm

There are two textboxes in this scenario. The first box should always contain 4 digits when you leave it, while the second box should always contain 10 digits. A javascript function needs to be implemented so that when a user leaves one of the textboxes, ...

Tips for utilizing component-specific sass files with Next.js

Having a background in React, my preference is to use SCSS files at the component level just like I did in my React app. However, I encountered an issue when trying to do so in Next.js: Global CSS cannot be imported from files other than your Custom < ...

Using an array to dynamically input latitude and longitude into a weather API call in PHP

I am currently working on a leaflet map project that showcases the top 10 cities in a selected country. The markers are added dynamically based on the coordinates provided in the $latLng array. For example, when Australia is chosen from the select field, t ...

Attempting to iterate through an array of HTML5 videos

Having some trouble with my video array - it plays but doesn't loop. I've tried using the HTML video attribute 'loop' and variations like loop="true" and loop="loop" without success. Tonight, all I want is for it to loop properly! var ...

Deleting all JSON files in a directory using NodeJs

Is there a way to delete only the json files within a directory (multiple levels) without specifying each file name individually? I thought fs-unlinkSync(path) might work, but I haven't found that solution yet. I attempted to use the following method ...

The footer should always be anchored at the bottom of the webpage, maintaining a consistent position regardless of any changes to the browser's

I've successfully implemented a footer with several buttons that remains positioned at the bottom of the page, 60px above the very bottom, regardless of the content or window size. The CSS I'm using is as follows: #container { min-height: 10 ...

Encountering a d3.js runtime issue following the transition to Angular 8

I've been experimenting with upgrading my Angular 6 application to Angular 8. It compiles fine, but I'm facing a runtime error as soon as it runs: "d3.js:8 Uncaught TypeError: Cannot read property 'document' of undefined". The specific ...

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

After creating two JavaScript functions, I am eager to utilize both of them upon pressing the submit button on my form. The first function is already integrated into the submit button and activates a paragraph display upon submission. Now, I intend to sh ...

Mastering React children: A guide to correctly defining TypeScript types

I'm having trouble defining the children prop in TypeScript for a small React Component where the child is a function. class ClickOutside extends React.PureComponent<Props, {}> { render() { const { children } = this.props; return chi ...

Is it possible to trigger an event just once?

Is there a way to ensure an event only fires once? I recently discovered that using .one seems to do the trick. ...

Analyzing JSON parsing efficiency

I am currently working on a client application using jquery and html5 For my project, I have a data file that is 70 MB in size The file named data.json contains the following: var myData = [ { "id":"000000001", "title":"title1", "c ...