Noark Noark - 9 months ago 61
AngularJS Question

Angular UI-Router childs

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", [

My routes are;

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

I have in my index
for the place of the loadings and another
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:

Answer Source

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