Angular module delayed initialization

After defining my angular module in a routine following window.onload, I've noticed that angular seems to look for the module before the window is fully loaded. However, I want to make sure all assets are loaded before triggering the angular module.

Is there a way to hook into another load event like DOM ready in order to ensure my application starts up before the angular module? Keep in mind that my angular module is being used by another library as a dependency.

window.onload = function() {
    angular.module("nav", [])
        .controller("NavController", function() {
        });
}

<nav class="state_2" ng-app="nav">
        <ul ng-controller="NavController">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>

Answer №1

If you want to accomplish your goal with lazy loading in an app, consider using angular.bootstrap and removing ng-app from the HTML structure.

Example

<nav class="navigation">
  <ul ng-controller="NavController">
    {{test}}
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</nav>

JavaScript Code

window.onload = function() {
  angular.module("customNav", [])
    .controller("NavController", function($scope) {
      $scope.test= '13123'
    });
    angular.bootstrap(document, ['customNav']);
}

View Demo

Answer №2

By placing all your scripts below the DOM and before the closing body tag, you can ensure that the scripts will run only after the DOM has finished loading.

For a more in-depth explanation, check out this resource: pure JavaScript equivalent to jQuery's ready() - how to execute a function when the page/DOM is prepared

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

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

Every time I attempt to run "npm install" on Visual Studio Code, I encounter an error

Every time I try to run npm install, I encounter this error. My node version is 18.9.1 and I have exhausted all possible solutions. Any help would be greatly appreciated. '''npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Us ...

Error: Uncaught [🍍]: The function "getActivePinia()" was invoked without an active Pinia instance present. Ensure that you have called "app.use(pinia)" before attempting to utilize a store

I encountered an issue while trying to access a store in Pinia for my Vue web application. Despite installing Pinia and setting app.use(createPinia()), I keep receiving the following error message: Uncaught Error: [ ...

How to determine if a string includes a particular substring in Javascript without using the indexOf method

Is it possible to determine if a string contains a specific substring without using indexOf, regex match, or any standard JavaScript methods? Feel free to review this code snippet on jsfiddle: https://jsfiddle.net/09x4Lpj2/ var string1 = 'applegat ...

Tips for incorporating a hashbang into a JavaScript file that is executable without compromising browser compatibility

Is it possible to run code like this in both Node.js and the browser? #! /usr/local/bin/node console.log("Hello world") I have a script that I currently run locally in Node.js, but now I want to also execute it in the browser without having to modify it ...

Should the hourly charge schedule be based on user input and be created from scratch or utilize existing templates?

I have hit a roadblock while creating a charging schedule based on user input for my project. I am debating whether to search for and modify an existing plugin or develop it from scratch. The schedule involves solar charging electric cars between 7am and ...

Implementing the disabled attribute in input text fields with Vue.js

There are 2 URLs that I am working with: /register /register?sponsor=4 The first route, /register, provides a clean input field where users can type freely. The second route, on the other hand, pre-fills the input with a value of 4 and disables it, ...

Please phone back regarding the adjustment of column sizes

Are there any callbacks provided for column resizing in ag-Grid? I was unable to locate any documentation related to column resize callbacks. Here is a sample code snippet: var onColumnResized = function(params){ console.log(params); }; gridOptions.onC ...

Toggling the form's value to true upon displaying the popup

I have developed an HTML page that handles the creation of new users on my website. Once a user is successfully created, I want to display a pop-up message confirming their creation. Although everything works fine, I had to add the attribute "onsubmit= re ...

Deactivating upcoming weeks according to the year in Angular 8

In the user interface, there are dropdowns for selecting a year and a week. Once a year is selected, the list of weeks for that year is displayed in the week dropdown. Now, the requirement is to disable the selection of future weeks. For example, for the ...

Accessing the API and binding it with the nginx proxy through Express gateway has encountered a problem. The server response indicates that it is unable

I am encountering an issue with my microservices servers connected to the express gateway. The gateway is functioning properly locally, but it is unable to access other API routes within the server. For example, when trying to access from the server, it r ...

Creating a clickable link that dynamically updates based on the span and id values, and opens in a new browser tab

I am attempting to create a clickable URL that opens in a new window. The URL is being displayed and updated on my HTML page in the following manner: Python Code: def data_cb(): return jsonify(waiting=await_take_pic()) Javascript Code: jQuery(d ...

Attempting to run a pair of JavaScript files simultaneously using the window.onload event

I'm facing an issue where two JavaScript files linked to a single HTML document are conflicting with each other. It seems like the second JS file is always taking precedence over the first one. I suspect that this might be related to both files using ...

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

The issue: Upon page load, some images are still processing and not displaying (even though the image URLs are known). The resolution: To address this problem, a customized directive was developed to showcase a loading spinner as a placeholder until the i ...

Guide for eliminating a specific row from a list in AngularJS

Despite my thorough search, I couldn't find a solution to my problem of deleting the CORRECT row from the list. Let's say I have the following array: $scope.rows = [{ "ID": 12, "customer": "abc", "image": "abc.jpg", },{ ...

Issue with retrieving the value of a JavaScript dynamically generated object property

I'm currently working on a React Material-UI autocomplete component and facing challenges with accessing a Javascript Object property within a handleSelect function. Although I can retrieve the townname value using document.getElementById, I know thi ...

How can I utilize npm with the original source code instead of minified or bundled code?

I am looking to access npm and JavaScript (or TypeScript) 3rd party libraries directly from the source code. Similar to how I can make changes in Python libraries by going into their source code, I want to have the same capability with my JavaScript depen ...

leveraging Ajax to submit a segment of the webpage

-Modified- Greetings, I am facing a situation where I need to post only the second form on a page that contains two forms. The second form has a function for validating data such as date, email, etc. My goal is to send the second form without reloading ...

Populate the ListBox based on the value of the input control in the onKeyUp event

I have a ListBox control <asp:ListBox ID="ListBox1" runat="server"> <asp:ListItem Value="1" Text="XYZ" /> <asp:ListItem Value="0" Text="XYZD" /> <as ...

What is the solution for addressing a blank canvas after integrating Orbit Controls in Three.js?

Currently, I am working on learning three.js, and my progress has been going well. I successfully programmed a cube on the canvas using JS Fiddle. However, when I attempted to implement Orbit Controls to rotate the cube, the canvas displayed only a black s ...