Come creare viste guidate dai dati in AngularJS?

Naviga le tue risposte
0

Sto costruendo un front-end web di supporto per il nostro team da cui possiamo eseguire varie funzioni di supporto per diversi siti in cui i nostri prodotti funzionano. Questo in genere comporta l'esecuzione di una sorta di query di dati e la visualizzazione dei risultati per risolvere problemi di processo specifici.

Ogni utente ha accesso a quali siti può supportare e quindi a quali funzioni all'interno di quel sito può eseguire. Quindi la mia navigazione principale è l'elenco di siti a cui hai accesso, quindi quando fai clic su una voce di menu del sito, carica un navigatore laterale con una voce di menu per ogni funzione che puoi eseguire sul portale di quel sito.

Il front-end è AngularJS con CSS Bootstrap. I dati vengono richiamati tramite API Web ASP.Net e alcune chiamate RESTful dei servizi WCF.

Possiedo un FunctionController AngularJS che, tramite il routing, visualizza una vista function.html quando si fa clic sul navigatore laterale. Come faccio a collegare una vista dinamica a ciascuna voce di menu funzione / side-nav invece di avere solo una vista funzione per tutti gli elementi di sidenav?

Ogni funzione, quindi voce di menu sidenav, ha un percorso API Web specifico per chiamare collegato a quella particolare funzione. Pertanto, l'interfaccia utente di ciascuna funzione sarà molto diversa. Potrei inserire un nome di vista html nella mia tabella delle funzioni MS SQL, dove memorizzo il nome della funzione, la chiamata dell'API Web, ecc., Ma come potrei farlo passare al routing di AngularJS? O metterlo in qualche modo nell'html di sidenav menuitem?

    
posta Neville 04.03.2016 - 14:05
fonte

2 risposte

0

Un po 'di giocherellare e ho trovato una soluzione: viste parziali con ngInclude. La parte del percorso URI che memorizzo nel database (equivale a una funzione) può anche raddoppiare come nome per una vista parziale. Quindi per ogni funzione, ho solo bisogno di creare una vista [functionUri] .html corrispondente. Quindi invoco quello via ng-include nella mia funzione.html in questo modo: 

<div class="container">
  <h3>Function: {{vm.theFunction.ShortName}}</h3>
  <div class="row" ng-include="'app/functions/'+vm.theFunction.FunctionUri+'.html'">
</div>

Non sono sicuro che sia il più elegante, ma per ora dovrebbe funzionare.

Sono aperto a qualsiasi altro suggerimento. Saluti

    
risposta data 04.03.2016 - 15:32
fonte
-4

Puoi utilizzare la direttiva ng-react .

    
risposta data 31.08.2016 - 20:16
fonte

Leggi altre domande sui tag

Quanto è comune la manipolazione delle stringhe, davvero? [chiuso] Quali altre lingue, oltre a Transact SQL, affermano che 22/7 è uguale a 3? [chiuso]