Angularjs: moltiplica i partial in un singolo html?

È possibile recuperare multipli html parziali in un singolo html? Ho la situazione successiva:Angularjs: moltiplica i partial in un singolo html?

Template: {header} {main} {footer} 

/index: header:"Welcome" main:"welcome text" footer:"" 

/help: header:"Help title" main:"faq tips" footer"Back to home"

utilizzando ng-includere ho retreive 6 HTML dal server. Se restituirò multipli partial in un html, recupererò 2 html solo dal server, uno per/index e uno per/help.

Questa situazione è un piccolo esempio della situazione reale.
Il tag sceneggiatura con il tipo ng-template non funzionano per me, perché lo script deve essere includere prima di ng-includere.

Grazie!

Aggiornamento 04/07/12:

cerco di aggiornare più di un div alla volta, con una prelevare html unico. Non mi piace:

function IndexCtrl($scope) { 
    $scope.mainPage = 'partials/index/index.html'; 
    $scope.headerTemplate = 'partials/index/header.html'; 
    $scope.footerTemplate = 'partials/index/footer.html'; 
}

Dopo nel modello utilizzare ng-include per includere questi parziali. Penso che questo non sia il modo corretto. C'è un altro modo?

Grazie!

fonte

2012-07-04 jlarghi

Potete fornire maggiori informazioni su ciò che si sta cercando o un violino con quello che stai cercando di ottenere? – ganaraj

I modelli possono essere incorporati nell'html principale. Ad esempio, con la seguente index.html:

<!DOCTYPE html> 
<html ng-app=app> 
<meta charset=utf-8> 
<title>App</title> 
<ng-view>Loading...</ng-view> 
<script type=text/ng-template id=partial1.html> 
<p>foo = {{foo}}</p> 
</script> 
<script type=text/ng-template id=partial2.html> 
<p>Contents of partial2.html</p> 
</script> 
<script src=app.js></script>

è possibile utilizzare il seguente app.js:

angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) { 

    $routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' }); 

    $controllerProvider.register('Partial1', ['$scope', function($scope) { 
    $scope.foo = 'bar'; 
    }]); 
}]);

Il documentation for the $templateCache service ha più dettagli.

fonte

2012-07-04 16:53:35

Grazie! Molto utile. – jlarghi

Una cosa da tenere a mente con questa soluzione è che probabilmente non scala bene. Se hai solo alcuni modelli, questo funzionerà molto bene. Se stai costruendo un'applicazione di dimensioni maggiori con dozzine di modelli, il tuo file di indice sarà molto pesante e difficile da mantenere. – ryanzec

Mmm bene, se si utilizza un backend per generare l'HTML, è possibile gestire i partial come partial reali (file diversi), ma unendo tutto in uno HTML per le prestazioni. È come lo faccio adesso. –

Quello che faccio è usare template invece di templateUrl, e usare il plugin di testo requirejs per caricare i template. in questo modo per lo sviluppo puoi avere migliaia di file per i tuoi modelli, ma una volta che hai un minimo hai solo un file javascript con tutti i modelli in linea.

ho creato un progetto open source, che è impostato per la spina dorsale, ma può essere facilmente modificato per angolare che fa la minimizzazione e requirejs cablaggio testo plugin per voi: http://github.com/davidjnelson/agilejs

fonte

2013-03-04 23:57:08 davidjnelson

un'altra alternativa, e cosa fa Google, è usare la chiusura invece di requirejs per la gestione delle dipendenze. – davidjnelson

Angularjs: moltiplica i partial in un singolo html?

risposta

Problemi correlati