Initialization of Angular provider $get is missing

Within my 'app.js' file, I have the following code that is used in my config to set up

$navigationProvider.doSomething()
. When running this code, Test1 and Test3 are alerted correctly, but I'm having trouble with getting my this.$get method to work (none of the Test2 alerts are showing). Shouldn't it be called during the page initialization?

//providers.js

angular.module('myapp.providers', []).provider('$navigation', function() {
    var routes = {};

    function test () {
        alert(arguments);
    };

    alert('Test1');

    this.$get = ['$rootScope', '$location',
        function( $rootScope, $location) {
            $rootScope.$on('$locationChangeSuccess', function () {
                alert('Test2');
            });

            alert('Test2');

            return {};
        }];

    this.doSomething = function () {alert('Test3')};
});

//app.js

var app = angular.module('myapp', [
        'myapp.providers'
    ]).config(function ($locationProvider, $navigationProvider) {
        $navigationProvider.doSomething();
        $locationProvider.html5Mode(true);
    });

EDIT:

To make it work, I had to add a

.run(['$navigation'], function ($navigationProvider) {})
block to my 'myapp.providers' module. So my question now is why the provider isn't automatically initialized (considering it's configured in app.js)? Is there another way to ensure my provider gets initialized? Having an empty module.run()-block seems unnecessary!

Answer №1

It seems like you already know the answer to your question. Configuration should be completed during the configuration phase, while instantiation should occur at runtime. Otherwise, the purpose of having a configuration phase would be lost.

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

problem with passing the identification number into the function

I am facing an issue with passing the id into a javascript onClick method. I am using the Spring framework and in the controller class, I send the related id to the JSP file like this: model.addAttribute("uploadid", uploadid); Afterwards, I need to p ...

Creating a connection to an external website through a JavaScript function within an Angular application

I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites. <a href="#" onclick="getExternalUrl('about.html');">Click here </a> <scr ...

Having trouble retrieving JSON data from an external source

I'm currently facing a challenge where I am unable to fetch JSON data from a webpage despite multiple attempts. I keep encountering the following errors: Uncaught SyntaxError: Unexpected token : or XMLHttpRequest cannot load URL. No 'Access-Co ...

What is the most effective method for combining data from two APIs into a single React table?

Looking to combine data from 2 separate APIs that both have pagination capabilities. What is the most efficient method to present the merged data in a table? The data needs to be joined based on their unique id, however one API provides fewer records tha ...

Implementing specific actions based on user selections in an Oracle APEX navigation bar

Within the application's navigation bar, there is a Home item that is present on all pages. I want to implement a feature where if the user clicks on the Home item, a warning message will pop up based on the page number, alerting them that any unsaved ...

What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine @import '~bootstrap/dist/css/bootstrap.min.css'; ...

Implementing a dual hover effect on a Div element

I am working with HTML code that includes an image and text <div class="subcontainer1"> <img src="a.png" alt="" class="imgcolumn"> <h3 class="header3">Hello</h3> </div> This setup places the content above the image. ...

Customizing an image with personalized text and then sending it to a server using a combination of javascript and

Looking for a way to add text to an image saved on the server, then save the edited image back to the server. I've heard using canvas is the best approach, but struggling to find the specific solution I need. ...

Navigate through a given value in the event that the property undergoes a name change with each

Exploring an example found on the JSON site, I am facing a situation where I am using an API with JSON data. The property name "glossary" changes for each request made. For instance, if you search for "glossary", the first property is glossary. However, if ...

Incorporating PHP variables within JavaScript

As a beginner in web development, I am working on creating an application that heavily relies on JavaScript but also includes PHP/MySQL to prevent users from viewing quiz answers by inspecting the page source. The key pages involved in this project are: in ...

Using Jquery to detect if there are any Space characters in the user input

In my form, users are required to set up a new Username. The problem arises when they include a space in their username, which I want to prevent. Currently, I am able to detect the presence of a space with this code: var hasSpace = $('#usernameValue ...

Passing an empty JSON object through Ajax requests

To Whom it May Concern (I am simply attempting to meet the "please add more detail" requirement) Upon sending data to the server as shown below, the body appears empty. Server // Route for POST method app.post('/pass', function (req, res) { ...

Would someone be able to clarify the purpose of this await useState React code?

Recently, I came across some React code that directly modifies the state, which goes against what I was taught. However, when I attempted to update it properly, the functionality broke. Clearly, an issue needs to be fixed, but before diving in, I'd li ...

The image fails to appear while creating a PDF in AngularJS using pdfmake

I recently started using a fantastic pdf printing library called pdfmake in my angularjs SPA to generate PDF files. Everything was going smoothly until I tried to include images in the PDF. Strangely, when I added images, nothing happened - no errors, no e ...

Is there a way to prevent my smartchatbox from covering my fixed top navbar?

Click here for more information I am seeking assistance. Your help is greatly appreciated. The question's heading reveals all you need to know. All you have to do is resize your browser, scroll down, and the answer will become apparent. ...

Rails 6 not displaying Javascript as intended

I am a beginner at this, but so far everything seems to be functioning smoothly. On my page, users can upload and delete photos without any issues. The uploading and deleting processes work perfectly fine. However, I am facing an issue where the page does ...

load a particular section of another website into my own div

Similar Question: Ways to bypass the same-origin policy I've been looking for a way to load a specific div from another website using this code. Can anyone provide an example of how to do this on jsfiddle? $.ajax({ url: 'http://somethin ...

Creating a React Native project without the use of TypeScript

Recently I dived into the world of React Native and decided to start a project using React Native CLI. However, I was surprised to find out that it uses TypeScript by default. Is there a way for me to create a project using React Native CLI without TypeS ...

Customizing an array.map display in React Native

For my app, I am creating multiple drawers to showcase how it can be used. This is done by using the following code: Array(400).fill(info).map(info => {return <AlbumBox info = {info} />}) The information of an object is retrieved and passed into ...

Deliver a JSON response using Express

Attempting to implement a chat-gpt response in Node, I encountered an issue where the server is not serving up the data successfully, only returning {}. index.js import gptSummary from "./gptFunc.js"; import express from "express"; co ...