Prima di entrare nel concetto, reinventiamo il funzionamento di un'applicazione web.

Concetto di rendering lato server

Con i linguaggi di programmazione server (SSR/rendering lato server) come php, java, c#… il meccanismo funziona come segue:

• L'utente visita il link (URL) sul browser, invierà una richiesta (richiesta) con il metodo GET al server
• Il server riceve il segnale e restituisce l'intero contenuto della pagina Web corrispondente in base al percorso e ai parametri del percorso (il percorso e i parametri utilizzati per definire la richiesta) come testo completo inclusi HTML, CSS, JAVASCRIPT
• Il client riceve i dati restituiti, il browser si basa sul contenuto del testo, inclusi HTML, CSS, JS e lo rende all'interfaccia e lo visualizza per consentire all'utente di interagire.
• Dopo che l'utente ha interagito con l'interfaccia visualizzata, se l'utente continua a interagire con il sito Web per inviare informazioni al server (es. registrazione, login, invio di moduli), il browser continua a inviare il messaggio di informazioni al server attraverso un metodo ( GET o POST), solitamente, con i linguaggi di programmazione SSR, dopo l'invio della richiesta ricaricherà la pagina o passerà ad una nuova pagina. (scopri di più FORM in HTML per capire meglio).

Concetto di rendering lato client

Con i linguaggi di programmazione client (CSR/rendering lato client) come angularjs,angular,reactjs,vuejs … comunemente noti con il concetto di applicazione a pagina singola (SPA) il meccanismo di azione è il seguente:

• Al primo accesso la richiesta viene comunque inviata al server, il server restituisce l'HTML, e nell'HTML ci sarà un framework javascript integrato, quindi al primo avvio viene inizializzata tutta l'applicazione (l'applicazione è scritta interamente in javascript ). ed esegui lato client)
• Dopo l'esecuzione dell'applicazione, alla successiva comunicazione con il server, l'utente interagisce con l'interfaccia e invia una richiesta al server tramite il meccanismo AJAX (Asynchronous JavaScript and XML). Con questo meccanismo, il client comunica con il server, inviando e ricevendo dati tutto tramite javascript, il che significa che il contenuto dell'interfaccia parziale HTML può essere aggiornato tramite javascript, senza ricaricare l'intera pagina.

Confronta vantaggi e svantaggi dei due meccanismi

Percorsi in AngularJS con rendering lato client

Consideriamo un esempio di sito Web con funzionalità di menu per la navigazione dell'utente, quando raggiungiamo HTML o PHP, C#, Java, ogni volta che l'utente fa clic, spostiamo la pagina in un'altra pagina nuova o quando l'utente fa clic invia il form, o l'utente ricarica il sito oppure passa anche ad una nuova pagina, come ad esempio il mio attuale sito utilizza il CMS di wordpress con meccanismo di rendering lato server, cliccando sul link sopra navigazione l'applicazione passerà ad una nuova pagina , il server restituisce un'interfaccia HTML, il browser ricarica la pagina ed esegue nuovamente il rendering di tutto HTML, Javascript, css …

Per quanto riguarda il meccanismo di route in angularJS, c'è una differenza come segue: quando l'utente fa clic sul collegamento nel menu con un'applicazione angularJS, se il meccanismo è scritto correttamente, il browser non ricarica la pagina, l'intestazione e il piè di pagina lo fanno non cambia (Javascript, CSS non ha bisogno di essere nuovamente RENDER), quello che è cambiato è solo l'area HTML che dobbiamo aggiornare (nel caso del clic del menu sarà l'intero contenuto principale sotto il menu), questo salva il browser dal dover ricaricare l'intero HTML, JS, CSS ma basta aggiornare il nuovo HTML nell'area che deve essere aggiornata, aiutando l'applicazione a migliorare molto nelle prestazioni nelle successive interazioni.

La sintassi di inizializzazione per poter utilizzare i percorsi in angularJS, attraverso il meccanismo di dependency injection (tecnica di dependency injection), il concetto sarà trattato nel seguente articolo.

Per la prima volta nella serie vediamo l'applicazione angularJS che prende l'elemento come stringa come 2° parametro e, soprattutto, dobbiamo includere il file angular-route.min.js per il caricamento dell'applicazione, negli articoli .prima di aver passato tutti un array vuoto (nessun elemento):

 <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> ... var app = angular.module('myApp', ['ngRoute']);

Dopo aver incluso l'oggetto ngRoute nel progetto, siamo stati in grado di utilizzare i percorsi in angularJS tramite il servizio $routeProvider

Considera l'esempio seguente, utilizzando $routeProvider e configurando i percorsi per l'applicazione angularJS per creare un'applicazione di reindirizzamento

Passaggio 1: crea il file index.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Examole Routes AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> <style> .container { max-width: 400px; margin: 0 auto; padding: 15px; align-items: center; } .flex-wrap { display: flex; flex-wrap: wrap; } .list-none { list-style: none; } .menu-list { padding: 0px; margin: 0px; justify-content: flex-end; } .menu-list li { margin: 0px 5px; } .menu-list li a { text-decoration: none; color: #000; } .menu-list li a:hover { color: #46b8e6; } .no-margin { margin: 0; } .main-header { display: flex; background: #f5f5f5; } .logo-wrap { width: 45px; } .main-header nav { width: calc(100% - 46px); } .main-footer { background: #fa726c; } .white { color: #fff; } .blue { color: #46b8e6; } </style> </head> <body ng-app="myApp"> <div ng-controller="headerController" ng-class="[gc.container, gc.mainheader ,gc.flexwrap]"> <div ng-class="gc.logowrap"> <h2 ng-class="[gc.nomargin, gc.blue]">{{logotext}}</h2> </div> <nav> <ul ng-class="[gc.flexwrap , gc.listnone, gc.menulist]"> <li><a ng-href="#!">Home</a></li> <li><a ng-href="#!about">About</a></li> <li><a ng-href="#!contact">Contact</a></li> </ul> </nav> </div> <div ng-controller="mainController" ng-class="[gc.container, gc.mainbox, gc.flexwrap]"> <div ng-view></div> </div> <div ng-controller="footerController" ng-class="[gc.container,gc.flexwrap,gc.mainfooter,gc.white]"> {{copyRight}} </div> </body> <script> var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider. when('/', { templateUrl: 'templates/index.html' }) .when('/about', { templateUrl: 'templates/about.html' }) .when('/contact', { templateUrl: 'templates/contact.html' }); }); app.run(function ($rootScope) { // global class variable $rootScope.gc = { container: 'container', mainheader: 'main-header', mainfooter: 'main-footer', flexwrap: 'flex-wrap', listnone: 'list-none', menulist: 'menu-list', nomargin: 'no-margin', white: 'white', logowrap: 'logo-wrap', blue: 'blue' }; }); app.controller('headerController', function ($scope, $location) { $scope.navigation = [ { name: 'Home', url: '/', controller: 'mainController' }, { name: 'About', url: '/about', controller: 'mainController' }, { name: 'Contact', url: '/contact', controller: 'mainController' } ]; $scope.logotext = 'web888.vn'; }); app.controller('mainController', function ($scope, $location) { $scope.homedata = { title: 'Home', description: 'This is home page' }; $scope.aboutdata = { title: 'About', description: 'This is about page' }; $scope.contactdata = { title: 'Contact', description: 'This is contact page' }; }); app.controller('footerController', function ($scope) { $scope.copyRight = '@copyright web888.vn'; }); </script> </html>

Passaggio 2: crea una cartella modelli e file home.html, about.html, contact.html con codice sorgente sequenziale:

 <div> <h2>{{homedata.title}}</h2> <p>{{homedata.description}}</p> </div>

 <div> <h2>{{aboutdata.title}}</h2> <p>{{aboutdata.description}}</p> </div>

 <div> <h2>{{contactdata.title}}</h2> <p>{{contactdata.description}}</p> </div>

L'interfaccia di visualizzazione del browser, può interagire con il menu, i dati vengono aggiornati senza ricaricare la pagina

Se desideri funzionalità avanzate più flessibili, puoi utilizzare router in combinazione con direttive personalizzate per creare un'applicazione SPA con una struttura complessa, ad alta riutilizzabilità.