angular.js - angularjs 巢狀佈局如何實作？

Question

是這樣的，我的應用程式分為前台(home)和使用者後台(user)，依照基礎教學index.html作為首頁，同時也作為全域layout。

我的專案大致架構如下：

app
    app.js
    routes.js
    views
        home
            about
                index.html
            login
                index.html
            layout.html
        user
            dashboard
                index.html
            articles
                index.html
                detail.html
            layout.html
    index.html

現在我想的是，views/home 下的模板都繼承 views/home/layout.html，同理views/user。
以views/home/about/index.html為例,路由url是這樣的：

$routerProvider.when("/about",{
    templateUrl : "views/home/about/index.html"
});

現在的問題是，app/views/home/about/index.html 直接繼承了 app/index.html,而我想讓它這樣繼承：

app/views/home/about/index.html -> app/views/home/layout.html -> app/index.html -> 輸出到瀏覽器

該如何實現呢？

======
我找到了一個叫做 angular-ui-router 的第三方插件，它可以取代angular-router，可以實現這個功能。

Answer 1

你的選擇是對的。

Answer 2

看起來跟 MEAN.JS 的結構很像，可以參考看看。

Answer 3

把頁面裡所有元素都做成 directive，把繼承和嵌套的關係放在 directive 裡，一個頁面組合的運用幾個 directive。