Having trouble with displaying nested views in Angular UI-Router?

I am struggling to implement angular ui-router in my project. The views are not displaying as expected. Can anyone provide assistance? Here is a list of the files involved:

app.js, index.html, home.html, leftTree.html, topBar.html, ihome.html, footer.html 

angular.module('agentApp', ['ngCookies', 'ui.router', 'agentApp.controllers', 'agentApp.directives', 'agentapp.filters', 'agentApp.services'])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('index', {      
      url: '/',
      templateUrl: 'tpls/home.html'
    })
    .state('index.home', {
      url:'/home',
      views: {
        "leftTree": {
          templateUrl: "tpls/leftTree.html"
        },
        "topBar": {
          templateUrl: "tpls/topBar.html"
        },
        "ihome": {
          template: "tpls/ihome.html"
        },
        "footer": {
          templateUrl: "tpls/footer.html"
        }
      }
    })
}])

index.html

Add your unique content here.

home.html

Add your unique content here.

leftTree.html

Add your unique content here.

topBar.html

Add your unique content here.

ihome.html

Add your unique content here.

footer.html

Add your unique content here.

The attach file is I want the content display place enter image description here

Answer ā„–1

Here is a jsfiddle I created for you with a similar route definition. http://jsfiddle.net/vzmddcdL/

  1. Set the index state as abstract.
  2. $urlRouterProvider.otherwise should redirect to ("/home");
  3. In the index.home state, there's no need for / in the url definition since it is a child state of index which already includes / in its url ...so / + home = /home

    .state('index.home', {
          url:'home',
          views: {

Answer ā„–2

To correctly specify the views for uiViews iHome, footer, topBar, and leftTree within the index.home state, follow this format:

     views: {
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066a63607252746363466f6862637e286e696b63">[email protected]</a>": {
      templateUrl: "tpls/leftTree.html"
    },
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98ecf7e8daf9ead8f1f6fcfde0b6f0f7f5fd">[email protected]</a>": {
      templateUrl: "tpls/topBar.html"
    },
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef7f6f1f3fbdef7f0fafbe6b0f6f1f3fb">[email protected]</a>": {
      template: "tpls/ihome.html"
    },
    "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3831312a3b2c1e37303a3b26703631333b">[email protected]</a>": {
      templateUrl: "tpls/footer.html"
    }

If you omit the "@index.home" part, the ui-router will search for the named views in the parent state (i.e., the index state in index.html) which only contains the one unnamed view for displaying your home state.

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

activating javascript function in rails when the page reloads

I have a rails4 app and I'm looking to implement some specific JavaScript events when the page loads, but only if the user is coming from a certain page. On the post#index page, all comment replies are initially hidden. When a user clicks on a specif ...

How can I send a file and a string request using the POST method to a Spring REST controller that accepts byte[] and Strings with Angular

Need help with sending a post method that includes a file and another string request parameter to a spring rest controller using angular. The server controller parameter is set up to receive an array of bytes for the file and another string request wrappe ...

Retrieve the current date from a Datepicker and convert it into text format

My goal is to obtain a date from an input field in the Bootstrap UI Datepicker as plain text using a span. However, I am facing an issue where I am unable to retrieve the text from the span, as it returns undefined. Can anyone offer any tips or suggestions ...

Activate the mandatory attribute once the checkbox associated with the field is selected

I am facing an issue with looping rows that contain checkboxes and dropdown lists. I want the dropdown list to be marked as required when its corresponding checkbox is selected in each row. MARK NAME QUANTITY ------------- ...

The upcoming development does not involve creating an entire HTML webpage using on-demand static site generation (SS

Iā€™m encountering a problem when utilizing getStaticPaths and getStaticProps to create an on-demand SSG for a sharing page. My setup involves Next v12.1.0 and React 17.0.2. After building a specific /[id] page, I can retrieve the data but the HTML output ...

Recognize when the DOM undergoes modifications

After taking Matt's suggestion, I have made changes to the .ready() call. In my workflow, I utilize jQuery to set up certain configurations like this: $(function () { $('.myThing').each(function() { ... configuring happens he ...

How can Typescript help enhance the readability of optional React prop types?

When working with React, it is common practice to use null to indicate that a prop is optional: function Foo({ count = null }) {} The TypeScript type for this scenario would be: function Foo({ count = null }: { count: number | null }): ReactElement {} Wh ...

An angular component that is functioning properly when connected to a live server, however, it is experiencing issues when trying to run `

I tried integrating versitka into my Angular component by placing the version HTML file and all necessary assets in the appropriate directories. However, when I run ng serve, only the HTML file seems to be working, while the CSS and images fail to load. I ...

Error: Uncaught ReferenceError - 'channel' has not been defined

I'm currently working on a Discord bot that is designed to handle tickets and I'm facing an issue with sending messages in the newly created channel I attempted using .then, but for some reason it's not functioning as expected and I'm ...

"Exploring the possibilities of the Raphael JavaScript Library on an iPhone

I've been trying to integrate the Raphael JavaScript library into my iPhone project, but I'm running into an issue with getting it to work in a webview. On Safari for Mac, everything seems fine and I can see the red circle as expected. However, w ...

Error encountered when trying to load Ajax script

As a beginner in the learning process, my code may appear messy. I am currently wrapping up my second project, which is a photo viewer. On the main page, there is a navigation system that loads different sections of the website using ajax. Since this proje ...

Looking for assistance with submitting two forms in one AJAX request to a single file.php

Hey there, I'm looking to submit 2 forms using a single ajax or jquery request to a common file. The code snippet I currently have is as follows: <form id="filter-group1" class="form" target="remember" autocomplete="on" method="post"> <i ...

Is it possible to balance proper CSS and Javascript maintenance with the use of a Template Engine?

When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that < ...

What is the best way to toggle a div and dynamically load content into it while it's open?

I am looking to create a toggle effect where a div opens, loads a page within it, and then can be closed again. My goal is to achieve this functionality with multiple links on the page. <div id="main-nav"> <div id="menu-container"&g ...

Step-by-step guide on starting Edge with Open package on Windows 10

I am utilizing the Open package to launch URLs across different browsers. Unfortunately, there is a lack of comprehensive documentation on how to specifically launch with different browsers on various operating systems. After some experimentation, I have ...

Utilize ngModel in conjunction with the contenteditable attribute

I am trying to bind a model with a tag that has contenteditable=true However, it seems like ngModel only functions with input, textarea or select elements: https://docs.angularjs.org/api/ng/directive/ngModel This is why the following code does not work ...

Tips on managing the onKeyUp event in a ReactJS form

Here is a simple JavaScript function called numericOdds implemented in home.js file: function numericOdds(e) { var valid = /^[1-9]{1}[0-9]{0,1}$/ var number = /^[1-9]{1}$ | ^[1-9]{1}[0-9]{1}$/ var lastValid = ''; var n; console.log(&apo ...

Is there a way to activate and change the color of a Radio Button when it is clicked?

Is there a way to change the background-color of a clicked Radio Button so it appears highlighted? For example, when the first choice is clicked, I want it to stand out visually. This is the current UI displaying the choices: https://i.stack.imgur.com/a7 ...

Utilizing ng-model on a pair of inputs to achieve synchronized values

Is it possible to use ng-model on an input field that receives a value from another input field? I'm having issues with my code and I can't figure out why. Can ng-model be set to an input field using Angular values? Here's my code: ...

Only validate the nested object if the parent object is already present

In my scenario, I have a request body structured as follows: { "folder": { "value": "testFolder", "operator": "=" }, "name": { "value": "5456", "operator": "contains" } } While the presence of the request body is optional, I want to ensure that b ...