2013-11-22 15 views
6

Mi dispiace molto se non mi spiego molto bene, quindi ecco qui. Fondamentalmente sto avendo problemi a cercare di risolvere questo problema. Sto usando Yeoman per generare il mio progetto angolare. Ho un'intestazione e un piè di pagina, il footer sarà statico e l'intestazione avrà bisogno del proprio controller. Il problema che sto avendo è che non voglio particolarmente che l'intestazione sia al di fuori di altri controller. Forse ho sbagliato e in realtà non è un problema e la migliore pratica sarebbe ovviamente avere l'intestazione all'esterno ng-view? Questo è quello che ho finora:Come gestire l'intestazione e il piè di pagina con AngularJs

<head> 
    <!-- head stuff here --> 
    </head> 
    <body ng-app="dscover.me"> 

     <div ng-include src="'partials/header.html'"></div> 

     <div ng-view=""> 
     </div> 

     <div ng-include src="'partials/footer.html'"></div> 
    </body> 

È questo un modo corretto di includere un'intestazione e piè di pagina al di fuori del MainCtrl? Ha senso per me solo perché, se dovessi creare un nuovo controller/pagina, avrei ancora accesso ai controller al di fuori di esso? Il problema è che voglio astenermi dall'usare rootScope e sfortunatamente questo sembra essere l'unico modo quando si tratta di avere l'intestazione all'esterno dello MainCtrl?

Mi dispiace per la terribile spiegazione, ma spero che capiate ragazzi. Se c'è un modo migliore per farlo, per favore fatemelo sapere. Qualsiasi aiuto sarà apprezzato!

+0

Si dovrebbe mantenere questa struttura. Se vuoi che i controllori scambino dati, avrai comunque bisogno di servizi. E non vuoi che l'intestazione venga ripetuta ogni volta che la vista cambia. – maxdec

+0

rootScope è un meccanismo perfettamente accettabile per la comunicazione tra i controller che utilizzano un modello di eventing in cui i controllori generano eventi sottoscritti da altri controller. – Chandermani

+0

Un'altra opzione sarebbe usare $ broadcast per inviare messaggi all'intestazione, ma sono d'accordo, in questo caso non c'è niente di sbagliato nell'usare semplicemente rootScope. –

risposta

3

Prima di tutto, proverei a fare affidamento sulla funzionalità data di AngularJS il più possibile. Ci sono tre modi per implementare l'intestazione e piè di pagina in app:

  1. ng-include

Il motivo per cui si desidera utilizzare è la semplicità e meno al codice. Dalla documentazione:

Recuperi, compila e comprende un frammento di HTML esterno

Quindi, include semplicemente un pezzo esterno di html.

  1. ng-view

Si tratta di un router di default in angolare (prima di 2.0) e v'è una migliore opzione chiamata ui-router.

L'UI-Router è una struttura di routing per AngularJS creata dallo AngularUI team. Fornisce un approccio diverso rispetto a ngRoute in quanto modifica le viste dell'applicazione in base allo stato dell'applicazione e non solo all'URL del percorso.

Supporta funzionalità come viste nidificate, ecc. Il motivo principale per usarlo sarebbe separare i controllori e gli ambiti di tali viste. In termini di intestazioni e piè di pagina, se si desidera avere una logica completamente separata all'interno, quindi andare per esso.

  1. custom directive

Questa opzione dovrebbe essere utilizzata nel caso in cui se si dispone di una sovrapposizione logica nel principale campo di applicazione contenuti e intestazione/piè di pagina. Inoltre ottieni vantaggi aggiuntivi come riusabilità ecc.

Così, la scelta di scegliere uno, ma non essere pigro per cercare e leggere (here, here, here o here) prima di scrivere.

Problemi correlati