如何正確使用嵌套路由修復以下示例？

Question

所以，看來我並沒有得到ui-router，畢竟。

這裏是破例如： http://plnkr.co/edit/WgDqTzE3TJjrCZ2pxg5T?p=preview

實際的文件結構爲：

app/ 
    app.js 
    index.html 
    main/ 
    main.html 
    header/ 
     header.html 
    footer/ 
     footer.html 
    sections/ 
     content1/ 
     content1.html 
     content2/ 
     ... 

index.html具有簡單<div ui-view></div>

main.html具有：

<div ui-view="header"></div> 
    <div ui-view></div> 
    <div ui-view="footer"></div> 

header.html，footer.html,content1.html ......有實際內容。

app.js有：

$stateProvider 
    .state("app", { 
    url: "", 
    abstarct: true, 
    templateUrl: "main.html" 
    }) 

    .state("app.main", { 
    url: "", 
    abstarct: true, 
    views: { 
     "header": { 
     templateUrl: "header.html" 
     }, 
     "footer":{ 
     templateUrl: "footer.html" 
     } 
    } 
    }) 

    .state("app.main.content1", { 
    url: "/", 
    templateUrl: "content1.html" 
    }); 

所以，我認爲，這表示要「/」會告訴我的頁眉，頁腳，並自動在無名ui-view插入內容。

它沒有。我究竟做錯了什麼？

Answer 1

爲了使快速工作（不是預期）我剛剛添加錨點到頁腳，現在是working

<div> 
    im footer 
    <div ui-view=""></div> 
</div> 

爲什麼？因爲我們國家DEF是這樣的：

.state("app.main.content1", { 
    url: "/", 
    templateUrl: "content1.html" 
    }); 

這意味着：

做搜索無名鑑於我的父母

頁腳視圖是國家"app.main.content1"的父母，所以這樣我們可以瞄準它。

還有其他選項。

Here is什麼是最有可能的意圖：，確定指標的狀態被改變：

.state("app.main.content1", { 
    url: "/", 
    views: { 
    "@app": { 
     templateUrl: "content1.html" 
    } 
    } 

所以，現在我們針對app狀態，其觀點錨<div ui-view="">，由絕對命名。請參閱：

• View Names - Relative vs. Absolute Names

在幕後，每個視圖被分配遵循的viewname@statename，viewname表示視圖中的指令和國家名稱中使用的名稱的方案絕對名稱是州的絕對名稱，例如contact.item。您也可以選擇以絕對語法編寫視圖名稱。

最後，我們可以達到同樣的甚至一個抽象狀態和一個孩子，檢查here：

$stateProvider 
.state("app", { 
    url: "", 
    abstarct: true, 
    views: { 
    "" : { 
     templateUrl: "main.html", 
    }, 
    "header@app": { 
     templateUrl: "header.html" 
    }, 
    "footer@app":{ 
     templateUrl: "footer.html" 
    } 
    } 
}) 

.state("app.content1", { 
    url: "/", 
    templateUrl: "content1.html", 
}); 

現在，所有UI-Router魔術在根狀態DEF發生。我們首先以root（index.html）unnmaed view爲目標，注入main.html。下一步 - 行吟詩人的觀點目標通過「頭@應用」這個國家本身（main.html中的） - 絕對命名

這將是最合適的方式... working example