javascript - Using ui-router for "main" layout? -
i'm trying create 'main layout' page using ui-router views, can't seem working right (various errors, controllers not getting called, templates not getting loaded).
<!doctype html> <html ng-app="app"> <head> ... </head> <body> <header ui-view="header"> </header> <section ui-view="navigation"> </section> <section ui-view="content"> </section </body> </html>
the idea have state representing "root" state whole site providing templates navigation , header "root controller". every other state loads it's content "content" view without affecting others.
$stateprovider .state("index", { url: "/", controller: "app.indexcontroller", controlleras: "vm", views: { "header@index" : { templateurl: "app/main/header.html" } // nav etc. }
the app loads without errors, templates controller never invoked. did miss something?
i saw many people provide separate "layout" view get's loaded unnamed view (mostly on <body>
tag), consider useless main index.html
file layout. or: there better way achieve want?
there answer angular ui router - nested states multiple layouts working plunker showing layout: http://plnkr.co/edit/i0bj09bxr7ng9kzdeeiv?p=preview
the point there index.html
<div ui-view="layout"></div>
and root state injects ui-view="layout"
own template (layout) , injects layout views.
so firstly layout template:
<div> <section class="top"> <div ui-view="top"></div> </section> <section class="middle"> <section class="left"> <div ui-view="left"></div> </section> <section class="main"> <div ui-view="main"></div> </section> </section> </div>
and here state def
$stateprovider .state('root', { url: '', views: { 'layout': { templateurl: 'partials/layout/1-column.html' }, 'header@root': { templateurl: 'partials/layout/sections/header.html' }, 'footer@root': { templateurl: 'partials/layout/sections/footer.html' } } })
and how working? using absolute , relative target names.
view names - relative vs. absolute names
behind scenes, every view gets assigned absolute name follows scheme of viewname@statename, viewname name used in view directive , state name state's absolute name, e.g. contact.item. can choose write view names in absolute syntax.
for example, previous example written as:
.state('report',{ views: { 'filters@': { }, 'tabledata@': { }, 'graph@': { } } })
Comments
Post a Comment