Methods for utilizing AngularJS in ExpressJS to redirect pages

Welcome to the login page

        <!DOCTYPE html>
        <html ng-app="myApp">

        <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      
            <title>Login Page</title>
        </head>
        <body>

        <div class="container" ng-controller="loginctrl">
        <h1>Login Page</h1>
        <label>UserName</label><input class="form-control" ng-model="user.name"><br><br>
        <label>Password</label><input class="form-control" ng-model="user.password"><br><br>
        <button class="btn btn-primary" ng-click="login()" >Login</button>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="controllers/logincontroller.js"></script>
        <script src="angularjs/angular.js"></script>
        <script src="angular-route/angular-route.js"></script>
        </body>
        </html>                 

   This is Controller page

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

        myapp.config(["$routeProvider", function($routeProvider) {
            $routeProvider
            .when('/', {
                controller: 'loginctrl',
                templateUrl: 'login.html'
            })
            .when('/addusers', {
                controller: 'addusersctrl',
                templateUrl: 'addusers.html'
            })
            .otherwise({
                redirectTo: '/'
            });            
        }]);

        myapp.controller('loginctrl',['$scope', '$route', '$routeParams', '$location',function($scope,$http,$location){
            console.log("I am a controller");            

            $scope.login = function() {
              
                // $http.post('/login',$scope.user).success(function(response){
               
                $http({
                      method: 'post',
                      url: '/login',
                      data: $scope.user 
                    }).then(function successCallback(response) {

                        console.log(response.data);
                        
                         $location.path("/addusers");
                    }, function errorCallback(response) {

                        console.log(response.data);
                       
                    });            
            };
        }]);            

        myapp.controller('addusersctrl',['$scope','$http',function($scope,$http){
            console.log("I am a controller");           

            $scope.login = function() {
             
                // $http.post('/login',$scope.user).success(function(response){
               
                $http({
                      method: 'post',
                      url: '/login',
                      data: $scope.user 
                    }).then(function successCallback(response) {

                        console.log(response.data);       

                    }, function errorCallback(response) {

                        console.log(response.data);

                    });            
            };
        }]);

I keep encountering this error whenever I attempt to run this code:

Angular.js error angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.1%2Fangular.min.js%3A21%3A332)

Answer №1

An issue has been identified with dependency injection in the first controller:

myapp.controller('loginctrl', ['$scope', '$route', '$routeParams', '$location', 
                 function($scope, $http, $location) {

The dependencies injected are not consistent. To resolve this, modify it as follows:

myapp.controller('loginctrl', ['$scope', '$route', '$http', '$routeParams', '$location', 
                 function($scope, $route, $http, $routeParams, $location) {

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

Guide to substituting the index value with the user's specific choice

Let's simplify this. Suppose I have a list in my ng-repeat 1. A & index[0]<br> 2. B & index[1]<br> 3. C & index[2]<br> 4. D & index[3]<br><br> and there is an input field where the user can priorit ...

What is the best way to make changes to the DOM when the state undergoes a

I've programmed the box container to adjust dynamically based on input changes. For instance, if I entered 1, it will generate one box. However, if I modify the input to 2, it mistakenly creates 3 boxes instead of just 2. import React from 'rea ...

Utilizing a custom keyboard with Jquery for a recurring function

It seems like I might be missing something simple here, as I am following the code tutorial provided in the link below: The goal of this project is to create a popup keyboard for a touch screen. Although I have made some modifications for specific purpose ...

Is a DOM lookup performed each time Vue's ref is utilized?

Exploring the capabilities of Vue.js, I have integrated a few refs into my current project. However, I am curious about the efficiency of calling refs in methods. Does Vue perform a DOM lookup every time a ref is called, or does it store all refs once for ...

Dynamically fetching properties in AngularJSLet's explore

Here is a straightforward question for you: Can we retrieve a property value dynamically using the following code snippet? <div tabset> <div tab ng-repeat="item in teamController.range track by $index"> <div tab-heading> ...

There seems to be a malfunction in the PHP controller causing issues with the functionality

Currently, I am utilizing jQuery and PHP for my project. In the controller, I have integrated AJAX functionality. Upon the initial click action, the result is successfully retrieved (the current "show more button" is hidden and a new "show more button" is ...

JavaScript Character Set on the Dynamic Page in Delphi

Within my Delphi application, I am dynamically generating HTML content. Displaying UTF-8 encoded strings in the webpage body is not an issue for me as I use HTMLEscape to encode regular strings (ensuring all strings in the list are properly escaped). The ...

Tips for transferring HTML content from JavaScript to PHP using AJAX

Within my website, there is a textarea that allows administrators to input HTML content which can then be saved and displayed on the page for non-admin users. When attempting to transfer this saved HTML via PHP using AJAX, I encountered an issue where HTML ...

Fetching data from a Django view using a JavaScript AJAX POST call

Utilizing Javascript for an asynchronous request to a Django View, I am able to successfully receive data from the POST request. However, I am encountering issues with returning a confirmation message that the process was successful. Despite expecting xhtt ...

Tips for troubleshooting JavaScript tests in Node.js using breakpoints with Selenium WebDriver?

When writing my javascript tests in WebStorm, I incorporate Selenium WebDriver (along with chromedriver) to execute the tests in a browser. For test-runner framework, I rely on Mocha. The issue arises when: attempting to debug my tests and setting breakpo ...

An operation designed for the specific items within a selection

How can I utilize a function that generates an array of objects as items for vuetify select? This is how I am currently using it: <v-select :items='functionToCall()' ...... > After calling the function and checking the console ...

Transfer chosen item from real-time ajax search to input box

Looking to implement a live search feature similar to Google's on my website. The idea is to copy the selected live search results and display them in a textbox named "oki" using AJAX. The data for the live search is fetched from an XML file. Below ...

Expanding the functionality of a regular expression

My goal is to identify JavaScript files located within the /static/js directory that have a query string parameter at the end, denoted by ?v=xxxx, where 'x' can be any character or number. Here's an example of a match: http://127.0.0.1:8888 ...

Production environment facing issues with Angular Rails templates

After deploying my application using AWS EC2 with Elastic Beanstalk (EB), I encountered an issue where the application would display an empty page with no errors in the console. I had placed my template under app/assets/templates/simple_template.htm ...

Exploring the power of the JavaScript this keyword

Can you explain the purpose of the line this.tasks = tasks; in relation to the constructor method? class TaskCollection { constructor(tasks =[]) { this.tasks = tasks; } } ...

OroCrm is ensuring that Symfony2 profiler seamlessly updates the footer data without triggering a 404 error page within a popup

As a newcomer to OroCrm, I recently installed and configured it on my DEV environment using the app_dev.php entry point. After setting up OroCrm, I immediately noticed the Symfony2 profiler bar appearing at the bottom of the interface. While this was a he ...

Utilizing the powerful slice function within Lodash

I am looking to create a function that takes an array and a number as input. If the number is positive, the function should place it at its corresponding index within the array. For example, if we have an array of 1,2,3,4,5 and the number 2, it should be p ...

Tips for choosing a dropdown option by inputting a value into the designated text box

Hey there! I'm currently working on a dropdown menu that pulls data from a database. Let's set aside the technical details for a moment - I have a text box next to the dropdown. The idea is that if a user types in a value, it should automatically ...

Unable to retrieve values while mapping in next.js / react due to access restrictions

Hi there, I'm currently facing an issue with accessing specific values in a JSON object. Below is the code snippet that is causing the error: const Index = props => ( <Layout> <h1>Case Studies</h1> <ul> {props.caseS ...

Best practices for styling column headers in HTML tables

Developing a web application using Angular Material has been my ongoing project. I have created an md-list with 7 columns to display different values. My goal is to add a header to each column to identify its corresponding value. While I have the headers r ...