Ropstah Ropstah - 4 months ago 8
AngularJS Question

Unable to use abstract state to provide initial shared views in Angular UI-router

I'm trying to provide some initial "partial" views through an abstract state using

Angular
and
Angular UI router
but somewhere along the way I'm making a misinterpretation which breaks my implementation...

As you can see I tried some variations with specifying a
customLayout.html
template to the abstract state. This also didn't work.

What does work (but isn't what I want) is specifying the shared partial templates on each state.

I've implemented that what does and what does not here:


See this: JSBin.

Look at:
//REMOVE COMMENT HERE
to switch between an "inherited" or "child" state.


$stateProvider
.state("layout", {
abstract: true,
url: "",
//templateUrl: "customLayout.html",
views: {
"header" : {
templateUrl: 'shared/header.html',
}
}
})
//REMOVE COMMENT HERE
//.state("layout.demo")
.state("demo", {
url: "/demo",
views: {
"" : {
templateUrl: 'demo.html',
},
"header" : {
templateUrl: 'shared/header.html'
}
}
});


Edit:

With help of this:

$stateProvider
.state("layout", {
abstract: true,
url: "",
//templateUrl: "customLayout.html",
views: {
"header" : {
templateUrl: 'shared/header.html',
},
//ADDED THIS, ESSENTIALLY PROXYING THE NAMELESS TEMPLATE
'': {
template: '<ui-view />'
}
}
})

Answer

Try this:

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        console.log("app: states");

        $urlRouterProvider
            .otherwise('/demo');


        $stateProvider
            .state("layout", {
                abstract: true,
                url: "",
                //templateUrl: "customLayout.html",
                views: {
                    "" :  {
                        templateUrl: 'demo.html'
                    },
                    "header" :  {
                        templateUrl: 'shared/header.html'
                    }
                }
            })
            //REMOVE COMMENT HERE
            //.state("layout.demo")
            .state("layout.demo", {
                url: "/demo",
            });
    }
]);

Here is the working link: http://jsbin.com/zehejovaco/1/edit?html,output