The challenge of handling scopes in Angular-seed

I am currently facing a challenge with creating a pre-routeProvider post. The problem I'm encountering is that $http is coming up as undefined, even though I am passing it to the function as per my understanding. I have made sure to declare angular.js before validation.js in the index.html file.

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/universal/validation.js"></script>   

Here is a snippet from my app.js:

'use strict';

angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.test',
  'myApp.version'
]).
config(['$routeProvider','$http', function($routeProvider,$http) {
    alert ('before call');
    var temp = sessionValidation($http);
    alert('temp : '+temp);
    $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Components/universal/validation.js

function sessionValidation($http) {
alert('before post');
return $http({
    url: 'http://255.255.255.255/rip.dll/REST/SESSIONS/',
    method: 'POST',
    dataType:"json",
    xhrFields :{"withCredentials" : true},
    data: {'logintype':'1','host':'255.255.255.255','user':'Administrator','password':'1234','controlid':'ABC999'}
})
    .success(function (data) {
        return data.stats;
    })
    .error(function () {
        return 'Error';
    });
}

The browser displays this:

https://i.sstatic.net/pwQs2.png

And here is the error message:

[$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:unpr] Unknown provider: $http...

Full Error Message

I would appreciate any guidance on why $http is not being set. Thank you for your help. Feel free to ask for additional information if needed.

Answer №1

In the config phase, it is important to note that the $http service cannot be utilized as the provider may not yet be ready. To address this issue, you can utilize the resolve property within the $routeProvider.when() method like so:

'use strict';

angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/view1', {
            resolve: {
                sessionValidation: function($http) {
                    return sessionValidation($http);
                }
            }
        })
        .otherwise({redirectTo: '/view1'});
}])

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 encountered when running "npm install" following the configuration of an AngularJS project using Yeoman

Encountering an issue during or after the creation of an Angular project using the command: yo angular While installing devDependencies from the package.json ("npm install" which is triggered by yo angular), I noticed certain modules were missing in the ...

Tips for dynamically adding an HTML element to index.html using JavaScript

https://i.sstatic.net/cAna8.png How can I use JavaScript to insert cards into a container or display them in flex? Currently, the cards are not displaying as desired. I attempted to insert data into the note class using insertAdjacentHTML in JavaScript, b ...

Tips on resolving JavaScript's failure to adjust to the latest HTML inputs

I'm working on a homepage where users can choose their preferred search engine. The issue I'm facing is that even if they switch between search engines, the result remains the same. I've experimented with if-then statements, but the selecti ...

Upgrade from Next.js version 12

Greetings to all! I have recently been assigned the task of migrating a project from next.js version 12 to the latest version. The changes in page routing and app routing are posing some challenges for me as I attempt to migrate the entire website. Is ther ...

Incorporate new content into JavaScript using the input element

I have a unique question - can text be added to JavaScript using the input tag? For example, <input type="text" id="example" /> And let's assume the JavaScript function is: function display_text() { alert("The text entered in #example wi ...

Issue with React container not connecting properly

I am currently facing an issue with a search bar where the input value is not displaying properly. Even when I check the value in the console, it only shows one character at a time. https://i.stack.imgur.com/Qm0Lt.png My assumption is that there might be ...

Code: Ensuring URL spaces are maintained

In my Angular 4 project, I have a service with a delete API that requires two strings as parameters. Here is an example of how it looks: this.http.delete(this.url + 'api/v1/ReportingService/collectionID/'+ '45902' +'/'+' ...

Forfeit cookie/session upon page refresh

I am currently working with two separate applications: An AngularJS client running on http://localhost:8080 A NodeJS API server running on http://localhost:3000 The NodeJS API Server solely provides JSON data to the client and does not serve any HTML pa ...

Adding code containing various Google Maps elements in a fresh browser window using JavaScript

I've encountered an issue while trying to create a new page with a Google map and title based on the button clicked. Interestingly, when I copy/paste the HTML in the "newhtml" variable into an actual HTML file, it works perfectly fine. However, it doe ...

Managing a database update when server actions involve various form types

My UI dashboard contains multiple forms like "edit title" and "edit description", each with just one input element. I am looking to streamline database updates and server actions in next js 14, utilizing useFormState on the front end. While I have achieve ...

Tips for implementing the ng-blur function within the AngularJS dropdown multiselect directive

I'm currently working with the angularjs-dropdown-multiselect Directive and I'm trying to trigger a function after the selection process. Unfortunately, I'm having trouble using the ng-blur function within this directive. Any assistance woul ...

Changing the color of an Angular <div> element with scripting

I am currently working on an Angular 6 project and I need to change the colors of a div tag from a script after a click function. However, I also need to change it back to transparent. When I click on the "Inheritance" option, the background color of the ...

Guide to selecting text within an unordered list on an HTML webpage without a distinctive identifier with Python Selenium

I am looking to automate the selection and clicking of the text 'Click Me Please' within a hyperlink using Python Selenium. The main challenge is that there is no distinct identifier for this item as it is nested within a list. The specific HTM ...

Something is amiss with the PHP email validation functionality

I have been facing issues with the functionality of my form that uses radio buttons to display textboxes. I implemented a PHP script for email validation and redirection upon completion, but it doesn't seem to be functioning correctly. The error messa ...

What is the process for integrating TypeScript compiling into a JavaScript application?

My project includes a build.js file that is responsible for building the project. It has two main objectives: Compile .ts files and store them in a new directory. Create an asar archive containing the compiled files. Since typescript (or tsc) is availabl ...

Creating a MEAN app with Angular2 and material design using a modular application architecture

I need to create a project utilizing MEAN Technology with the following components: Angular 2 for the client-side user interface Using Angular Material CSS Mongoose as the ORM for MongoDB Typescript for writing server and client scripts Gulp task runn ...

Curious about the power of jQuery methods?

I've been coming across codes similar to this: $(document.documentElement).keyup( function(event) { var slides = $('#slides .pagination li'), current = slides.filter('.current'); switch( event.keyCode ) { ...

Transferring data between Promises and functions through variable passing

I am facing a challenge. I need to make two separate SOAP calls in order to retrieve two lists of vouchers, and then use these lists to perform some checks and other tasks. I have placed the two calls within different Promise functions because I want to in ...

What is the best way to map elements when passing props as well?

In my code, I am using multiple text fields and I want to simplify the process by mapping them instead of duplicating the code. The challenge I'm facing is that these textfields also require elements from the constructor props. import React, { Compon ...

Resizing Bootstrap Modal using React with a Personalized Dimension

Is there a way to manually set the width of Bootstrap's Modal React component on my website? I want to be able to define the width in pixels, and if possible, use a const object in the .jsx file for CSS. If not, I can resort to using a .css file. Be ...