angular.js - How to implement nested layout in angularjs?

Question

That’s it. My application is divided into frontend (home) and user backend (user). According to the basic tutorial index.html is used as the homepage and also as the global layout.

The general structure of my project is as follows:

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

What I think now is that the templates under views/home inherit views/home/layout.html, and the same applies to views/user.
Taking views/home/about/index.html as an example, the routing url is like this:

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

The problem now is that app/views/home/about/index.html directly inherits app/index.html, and I want it to inherit like this:

app/views/home/about/index.html -> app/views/home/layout.html -> app/index.html -> Output to browser

How to achieve it?

======
I found a third-party plug-in called angular-ui-router, which can replace angular-router and can achieve this function.

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.