Ho tutto ciò di cui ho bisogno in 2 servizi sotto forma di API REST, è una buona idea o addirittura possibile sostituire la mia app asp.net esistente scrivendo UNA singola pagina html (incorporata con modelli Angular) invocando i servizi web da Controller JS? Quindi quella pagina html verrà pubblicata su IIS di produzione
La mia app asp.net esistente da sostituire è composta da due parti: creare una query per acquisire dati e chiamare un'altra app per decifrare i dati acquisiti.
Questo è l'approccio utilizzato da molte applicazioni Web.
Dovresti farlo? Dipende. L'approccio full-AJAX ha i suoi svantaggi:
SEO. Per un'applicazione interattiva che gestisce il contenuto dell'utente, come GMail o Slack, o qualsiasi altro contenuto che non sia testo, immagini o video, come Google Maps, questo è un non-problema: non c'è nulla da indicizzare. Per i siti web che si basano su contenuti pubblici, come Stack Exchange, è fondamentale fornire accesso a tutti i contenuti senza richiedere JavaScript.
Accessibilità. I siti web governativi in molti paesi dovrebbero seguire le regole rigorose sull'accessibilità , che in genere significa essere in grado di utilizzare il sito Web senza JavaScript. Alcuni siti web non governativi in settori specifici in alcuni paesi devono seguire anche gli standard di accessibilità.
Impatto della larghezza di banda. Se l'accesso alla prima pagina viene immediatamente seguito da centinaia di richieste HTTP, questo potrebbe diventare rapidamente un problema sia per la larghezza di banda che per i server.
Se usato in modo intelligente, AJAX consente di ridurre l'impatto sui server e sulla larghezza di banda servendo solo il contenuto assolutamente necessario per l'utente (e in particolare il contenuto dinamico in un modulo JSON compatto anziché HTML non così compatto, e lo spostamento di contenuto statico su un CDN). Tuttavia, raramente vedo applicazioni che usano abilmente AJAX, portando a un ingombro maggiore.
Alcune note:
AJAX è uno strumento, non un obiettivo. Non creare un'applicazione web AJAX completa solo perché è possibile. Fallo se sai che porta qualcosa di utile (come un aumento delle prestazioni) ai tuoi utenti.
Non aver paura di mescolare approcci diversi. Forse una parte della tua app web ha contenuto statico che dovrebbe essere indicizzato e ha senso farlo sotto forma di pagine HTML ordinarie, mentre un'altra parte è incentrata sul contenuto dell'utente presentato in modo molto interattivo; qui, AJAX ha senso.
Sì, puoi farlo.
È il modo giusto: se stai pensando a una mentalità a pagina singola dovresti prendere in considerazione l'utilizzo di un caricamento pigro per le immagini e, se possibile, di dati.
In alternativa puoi creare elementi dom in modo dinamico così il primo caricamento e il rendering della pagina saranno più veloci. Ma farà in modo che l'utente attenda alcuni millisecondi per ogni trasferimento di dati.
Un altro modo è usare le librerie js. Jeasyui è perfetto. L'ho usato per un grande progetto ed è stato soddisfacente. Le sue prestazioni e i suoi componenti sono soddisfacenti. Questo metodo è simile al secondo, ma un codice più chiaro è un vantaggio.
Sì, l'ho fatto !!!
var app = angular.module( 'ngApp', ['ngGrid'] );
app.controller('appController'
, funzione ($ scope, $ http) { initializeScope ($ scope);
$scope.GetData = function () {
$scope.qryStr = ( function ()
{
// bldg your qry ... ;
})();
var config = { header: { "Content-Type": "application/json; charset=utf-8" }, xhrFields: {withCredentials: "true"} };
var qryStr = JSON.stringify( $scope.qryStr );
$http.post( RESTUrl, qryStr, config )
.success( function ( response, status, headers, config ) {
$scope.gridOptions = {
data: response
, showGroupPanel: true
};
})
.error(function (response, status, headers, config) {
alert(qryStr+ " is failing!");
$scope.errmsg = "<hr />status: " + status +
"<hr />headers: " + headers ;
});
}; //GetData
});
HTML ::: >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-2.1.0.js"></script>
<script src="script/angular.js"></script>
<script type="text/javascript" src="JS/appController.js"></script>
</head>
<body ng-app="ngApp" >
<form ng-submit="GetData()" ng-controller="appController">
<div id="div_srchForm"> {{ ... your ng templates }} </div>
<div id="doMySubmit"><button type="submit">Submit</button></div>
<div class="gridStyle" ng-grid="gridOptions"></div>
<div id="div_err">{{errmsg}}</div>
</form>
</body>
</html>
Leggi altre domande sui tag architecture angularjs client