Angular UI-Router childs

Question

I have an app.config with UI-Router. It has a login page with it's controller, recoverLogin and I want to put a template with footer, header and more stuff with new states that could be loaded into the template (in an especificplace).

My module is:

var app = angular.module("app", [
    "ui.router", 
    "pascalprecht.translate"
]);

My routes are;

app.config(function($stateProvider, $urlRouterProvider)
{
    $stateProvider
    .state("login", {
        url: "/login",
        templateUrl: "views/accessControl/login.html",
        controller: "loginCtrl"
    });
    $stateProvider
    .state("recoverLogin", {
        url: "/recoverLogin",
        templateUrl: "views/accessControl/recoverLogin.html",
        controller: "recoverLoginCtrl"
    });
    $stateProvider
    .state("template", {
        url: "/template",
        templateUrl: "views/templates/template.html",
        controller: "templateCtrl"
    })
    .state("template.dashboard", {
        url: "/dashboard",
        templateUrl: "views/dashboard/dashboard.html",
        controller: "dashboardCtrl"
    }) 
    $urlRouterProvider.otherwise("login");
})

I have in my index <ui-view></ui-view> for the place of the loadings and another <ui-view></ui-view> in template.html int he place where I want to load more stuff like dashboard.html, but this doesn't works. it loads dashboard.html without the template created in template.html. I have founded lot of documentation that doesn´t works for me. Any Idea?

Here there are a plunker example of the idea: https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview

where is your template content? show it, create a plunker (even broken) and you will get more attention — Radim Köhler, Oct 24 '16 at 16:54
I checked your job (great job) and adjusted the plunker to be working. More details are in the answer.. good luck with UI-Router — Radim Köhler, Oct 25 '16 at 08:13

score 1 · Accepted Answer · edited May 23 '17 at 12:33

There is updated plunker and working plunker.

The template of the mainTemplate state is now lookin like this:

place for main:
<div ui-view="main"></div>


place for other:
<div ui-view="other"></div>

so it has two (could be more) places for more stuff. And this is the state redefined:

.state("mainTemplate.dashboard", {
    name: "main",
    url: "/dashboard",
    views: {
      'main' : {
        templateUrl: "dashboard.html",
        controller: "dashboardCtrl"
      },
      'other' : {
        template: "<h2>other view</h2>",
      }

    }
});

What we can see is views : {} object being used to defined multiple content for more targets. Read about that more details here:

play or observe the changes here

Angular UI-Router childs

1 Answers1