Having trouble loading the login page on a simple Angular application with ui-router

Currently tackling a POC at work and struggling to identify the elusive mistake lurking within this code. I'm working with a basic Angular app that utilizes ui-router. The Plunker version can be accessed here.

While examining the chrome console, I notice that my app.module is successfully created, yet the login page fails to display. Given the simplicity of this application, I suspect there's a straightforward solution that eludes me. Any insights or suggestions? Here is a snippet of the code for reference:

config.js

(function() {
'use strict'
var app = angular.module('app.core');
app.config(AppRouter);
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];

function AppRouter($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('login');
  $stateProvider
    .state('/', {
      templateUrl: 'login.html',
      controller: 'LoginController',
      controllerAs: 'vm',
    })
    .state('login', {
      templateUrl: 'login.html',
      controller: 'LoginController',
      controllerAs: 'vm',
    });
}
})();

login.controller.js

(function() {
'use strict';

var app = angular.module('app.login');

app.controller('LoginController', LoginController);

LoginController.$inject = ['$location', '$filter', '$window', '$rootScope'];

function LoginController($location, $filter, $window, $rootScope) {
  var init = function() {
    console.log('here');
  };

  init();
}
})();

app.module.js

(function() {
  var app = angular.module('app', ['app.core', 'app.login']);
})();

login.module.js

(function(){
    'use strict'
    var app = angular.module('app.login', ['app.core']);
})();

core.module.js

(function(){
    'use strict'
    var app = angular.module('app.core', ['ui.router']);
})();

Answer №1

After making a few adjustments, I was able to get it to work (check out the updated version here: https://plnkr.co/edit/D5AL8DTnqYI2g23wjE7W?p=preview):

You need to remember to include AngularJS in the head section. Don't forget to add 'ng-app' attribute, which I placed on the body tag. I also modified the configurations in 'config.js':

function AppRouter($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login');
    $stateProvider
      .state('/', {
        templateUrl: 'login.html',
        controller: 'LoginController',
        controllerAs: 'vm',
      })
      .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        controller: 'LoginController',
        controllerAs: 'vm',
      });
}

I added a 'url' property to the 'login' state and adjusted the 'otherwise' function accordingly by specifying '/login' instead of just 'login'. This is because the URL needs to be specified, not just the state name. It seems like you may have overconfigured your app with too many modules, making it difficult for me to follow. However, this is just my opinion and perhaps it's because I'm not as familiar with working with modules. Please try implementing these changes in your Plunk, and let me know if it still doesn't work, as I might have missed something accidentally.

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

Tips for ensuring proper dependency regulations in javascript/typescript/webpack

In essence, I am in search of a method to limit dependencies, similar to how one would manage different projects (libraries) in Java or C#. Think of it as friend or internal access modifiers. I'm considering various approaches to accomplish this (suc ...

javascriptif the number is a whole number and evenly divisible

I am currently developing a script that tracks the distance traveled by some dogs in meters. It is basically just a gif running in a loop. What I want to achieve now is to display an image every 50 meters for a duration of 3 seconds. Here's my attempt ...

Tips for utilizing onsubmit following an ajax validation check

How can I implement the onsubmit method after an ajax check? The current onsubmit function is not working. $(document).ready(function(){ $("#p_code").change(function(){ $("#message").html("<img src='ajax_loader.gif' width='26 ...

Tips for verifying the correct format of an email entered in HTML and PHP

<form action="form.php" method="POST"> username:<input type="text" name="username"> <br> password:<input type="text" name="password"> <input type="submit" value="register"> </form> I need to validate the email field to ...

A step-by-step guide on signing up for and utilizing the capabilities of mongoose-deep

Hey there, I'm currently exploring nested population within my mongoose models. After some research, I came across the Mongoose-Deep-Populate plugin as a potential solution for nesting. Despite its reputation for being user-friendly, I am struggling w ...

I am having trouble displaying my JavaScript-generated SVG

I attempted to achieve a similar effect (inspired by Fabio Ottaviani) as shown in this CodePen. However, I'm facing the challenge of creating this SVG using JavaScript. The ChatGPT response seems correct. The SVG is generated in the DOM but doesn&ap ...

Creating a custom hook in React that utilizes the useEffect hook with asynchronous functions

I am encountering an issue with my customHook that utilizes useEffect where I want it to return a result only after useEffect has completed. However, it consistently returns before my async method finishes... // customHook const useLoadData = (startLoading ...

Is it possible to modify the collection name while saving data in MongoDB?

Is it possible to change the name of the collection where I store the data? I have a Game model and currently save data like this: const teamData = new Game({ id: id, homeTeamName: hTeam, awayTeamName: aTeam, homeTeamGoals: ...

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent. `<script type="text/css" src="style.css"> </script>` However, inst ...

placing a see-through overlay onto a text-filled div

I have a text within a div and I am looking to overlay a transparent image on this div. When the image is clicked, the content of the background div should be displayed with the div changing its width to show the entire text with a scroll bar. Does anyone ...

Using a JavaScript function, transmit information through an Express response

I am working on sending an application/javascript response from my Express server, utilizing data retrieved from MongoDB. This response is intended for loading content on a third party website. All components of the process have been developed, and now I ...

Troubleshooting: Issue with selecting items in jQuery Datatables

While attempting to construct a jQuery datatable using a data object, I encountered an issue. The table is displayed correctly, but the selection feature within the datatable is not functioning as intended. My expectation was that when a row is selected, i ...

The PHP-generated table is not being appended to the specified div with jQuery

I am currently working on developing a webpage that displays live forex rates to users. I am pulling the values from a feed and echoing them into a table. My goal now is to use jQuery to show this table to the user. The issue I am facing is that when I tr ...

Transform the XML data into JSON format using XSLT

I need help transferring XML data into JSON using XSLT. The desired JSON output is as follows: callback( {"xml": <?xml version="1.0" encoding="UTF-8"?> <root> ... </root> "} ) Here is my current XSLT code: <xsl:template matc ...

The npm outdated -g command is producing an error message that states "Unable to read the length property of undefined"

I am currently facing an issue while trying to check the version status of my npm installed global packages. When I run the command npm outdated -g --depth=0 in the terminal, I encounter the following error: npm ERR! Cannot read property 'length&apos ...

Performing Batch Writes in Firestore using the Admin SDK

I have a massive ASCII flat file containing 1.5 million lines, which is essentially a list of parts from a manufacturer. I want to store this data in Firestore. Originally saved as a .csv file, the size was 250GB. After converting it to a JSON file using ...

Exploring how to use React with a select component featuring objects

Hello, I am new to working with React and I have a question regarding the select component of Material UI. Here's my situation: I am creating functionality for creating and editing a User object. This User object has a primary key and some data, incl ...

Is it possible to generate two output JSON Objects for a JavaScript line chart?

How can I display two lines in a Chart.js line chart using data from a JSON file with 2 objects stored in the database? When attempting to show both sets of data simultaneously, I encountered an issue where the output was always undefined. Why is this hap ...

What is the process for incorporating additional schema data into a model?

I'm currently using mongoose with MongoDB version 3.4.3 Here is my image model code: const mongoose = require("mongoose"); const CoordinateSchema = require("./coordinate"); const ImageSchema = new mongoose.Schema({ image_filename: { typ ...

Popup will automatically close if the user does not respond

I have implemented a session timeout functionality that triggers a pop-up window after 30 minutes of inactivity, warning the user that their session is about to expire. Seeking assistance with: If the user locks their desktop and does not provide any inp ...