Nested state fails to display HTML content or activate controller initialization

I am trying to utilize ui-router's parent/child states with the code snippet below. Everything seems to be in order as there are no console errors, but for some reason the HTML content is not being rendered and the controller's init function is not executing. This is a new technique for me and I'm unsure what could be causing the issue with the configuration. When I remove the abstract state and set up the app normally, the "Hello World" text does appear on the screen.

Plunker

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('main', {
        url: '',
        abstract: true
    })
    .state('main.login', {
      url: '/login',
      templateUrl: 'login.html',
      controller: 'LoginController',
      controllerAs: 'vm',
    });
}
})();

index.html

<body ng-app="app">
<div ui-view=""></div>
<script src="app.module.js"></script>
<script src="app.route.js"></script>
<script src="core.module.js"></script>
<script src="config.js"></script>
<script src="login.module.js"></script>
<script src="login.controller.js"></script>
</body>

login.html

<p>Hello World!</p>

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();
  }
  })();

Answer №1

To successfully load nested states, make sure each parent template has a <ui-view> element.

If your abstract state looks like this:

.state('main', {
        url: '',
        abstract: true
})

Update it to:

.state('main', {
        url: '',
        template:'<ui-view>',
        abstract: true
})

You can enhance the template by using templateUrl as well.

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

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

Leverage variables in JavaScript to establish a unique style

function AdjustScale(){ scaleX = window.innerWidth / 1024; scaleY = window.innerHeight / 768; element = document.getElementById("IFM"); element.style.transform = "scale(" + scaleX + ", " + scaleY + ")"; } I'm facing an issue with thi ...

The error message "TypeError ".deploy" is not a function in your Hardhat environment."

Currently, I'm in the process of developing a page for minting NFTs called astro-mint. To move forward, I need to deploy my contract using hardhat. However, when I execute this command npx hardhat run scripts/deploy.js --network dexitTestnet An erro ...

What is the method for placing one object within another object?

This is a sample of my data collection: [ { "column1":"data1", "column2":"data2", "column3":[ { "column31":"data31", "column32& ...

What could be causing my inability to accurately guess people's ages?

My latest project involves developing a game where players have to guess names from images. Each game consists of 10 rounds, followed by a bonus round where participants must wager their points on guessing the age of the person in the image within a 2-year ...

Searching for the position of different size values according to their specific value

information = { boxNoTo: 1, boxNoFrom: 1, size: 'M', } items = [{ size: 'M', },{ size: 'M', },{ size: 'S,M,L,XS', boxNoTo: 1, boxNoFrom: 1, country: 'CA', name: 'Josh' }] This is what I have don ...

Is there a way to trim the string after the second occurrence of an underscore?

I am faced with the task of extracting file names and types from a list of files in an object and displaying them in a table. The list of files is returned by the server in the format: timestamp_id_filename. For example: 1568223848_12345678_some_document. ...

Angular does not support the transmission of nested objects within objects

When I use Angular.js to send this JSON to my node.js/express.js service: { "name": "MyGuitar", "type": "electric", "userid": "123", "likes": 0, "dislike": 0, "guitarParts": { "body": { "material": "/content/img/hout.jpg", "_id": "5566d6af ...

Struggling to parse the JSON blob that was returned when using express-handlebars in node.js? Let

I am in the process of learning node.js and following a tutorial that involves making requests to the Accuweather API and receiving JSON data. Almost there ... but struggling with displaying the data: index.js const express = require('express' ...

Leveraging Ajax for Executing a MySQL Query in PHP upon Clicking the Facebook Like Button

Is it possible to execute a MySQL query whenever a Facebook Like button is clicked on a webpage? I am aware that FB.Event.subscribe('edge.create', function(response) {} is used for such actions. However, my lack of knowledge in Javascript and AJA ...

Attempting to grasp the principles behind AngularJS

I've recently delved into the world of AngularJS and I'm finding myself a bit lost when it comes to understanding directives and scope. As far as I can tell, directives are used to create reusable components that include functionality and logic ...

The CSS transition fails to function correctly when rendering a React element within an array

When rendering a React component within an array using CSS transitions, I noticed that the elements in the array re-order and change style. Surprisingly, only the elements moving up have transitions applied, while the ones moving down do not. I expect all ...

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

Tips for looping through multiple states within a single table

I need help with combining data from two different states, campaigns and stats, into a single table. The campaigns state includes sr no, campaign id, campaign name, and campaign status, while the stats state includes reach, sent, delivered, views, clicks ...

Dealing with errors in Smart Query using Nuxt and Vue Apollo: How to navigate to specific error pages for 404, 400, or 500 errors and is it possible to catch

When utilizing Smart Query for redirection, how can we redirect to a 400 page? While working with Vue Apollo, I attempted the following: apollo: { queryName: { prefetch: true, query: wrongQuery, error(e ...

Creating a PHP JSON response that incorporates an HTML layout is a dynamic

I'm having some trouble with a certain issue: I am attempting to develop a jQuery/AJAX/PHP live search bar. Although I am successfully calling search.php, the response displayed in the console always includes the contents of my master.php file (which ...

Selecting options using AngularJS to parse through a list

I am faced with a challenge involving a collection of strings representing years. Here is an example: $scope.years = ["2001", "2002", "2003", ...]; My goal is to display these values in a select tag within a web page. However, whenever I attempt this usi ...

Using VueJS Computed Property along with Lodash Debounce

I have been encountering a slowdown while filtering through a large array of items based on user input. I decided to implement Lodash debounce to address this issue, but unfortunately, it doesn't seem to be having any effect. Below is the HTML search ...

Using Vue.js to apply different CSS classes based on multiple conditions

Is there a way to highlight rows in a table based on specific conditions? For example, when the fine is greater than zero (fine > 0) or the due date is later than today. The current code works well for highlighting rows where issue.fine is greater than ...

Refresh a specific div element utilizing jQuery

I am facing a challenge with my data table in my Spring MVC project. I want to be able to update or remove data from the table without having to reload the entire page. Below is an example of the HTML div element: <div id="datatable"> </div> ...