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

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -