Noark Noark - 1 month ago 14
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", [
"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

Answer

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