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

Your choice is right.

Answer 2

It looks very similar to the structure of MEAN.JS, you can refer to it.

Answer 3

Make all elements in the page into directives, put inheritance and nesting relationships in directives, and use several directives in combination on one page.