angulaire.js - Comment implémenter une mise en page imbriquée dans AngularJS?

Question

C'est tout. Mon application est divisée en frontend (accueil) et utilisateur backend (utilisateur). Selon le didacticiel de base, index.html est utilisé comme page d'accueil et également comme mise en page globale.

La structure générale de mon projet est la suivante :

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

Ce que je pense maintenant, c'est que les modèles sous vues/home héritent de vues/home/layout.html, et il en va de même pour vues/utilisateur.
En prenant vues/home/about/index.html comme exemple, l'URL de routage ressemble à ceci :

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

Le problème maintenant est que app/views/home/about/index.html hérite directement de app/index.html, et je veux qu'il hérite comme ceci :

app/views/home/about/index.html -> app/views/home/layout.html -> app/index.html ->

Comment y parvenir ?

======

J'ai trouvé un plug-in tiers appelé angulaire-ui-router, qui peut remplacer angulaire-routeur et réaliser cette fonction.

Answer 1

Vous avez fait le bon choix.

Answer 2

Cela ressemble beaucoup à la structure de MEAN.JS, vous pouvez vous y référer.

Answer 3

Transformez tous les éléments de la page en directives, placez les relations d'héritage et d'imbrication dans les directives et utilisez plusieurs directives en combinaison sur une seule page.