Quando un'app basata su AngularJS diventa complessa, entra in gioco la necessità di componentizzare i template e i rispettivi controller.
Generalmente questo obiettivo si ottiene dividendo le funzionalità all'interno di file, che poi gestiremo attraverso $routeProvider, che è fornito dal servizio $route. Il compito del servizio di routing è quello di unire controller, view e l'URL mostrato nel browser, consentendo anche di sfruttare la navigazione del browser, sia andando avanti ed indietro, sia puntando direttamente ad un URL.
Perché il servizio posso funzionare, dobbiamo include un riferimento a angular-route.js nella pagina principale (diciamo la classica index.html) e poi referenziare localmente nell'app.js il nostro servizio:
var myApp = angular.module('myApp', [ 'ngRoute', 'myAppControllers' ]);
E poi configurare le route:
myApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/list', { templateUrl: 'views/orders/list.html', controller: 'OrderListController' }). when('/details/:Id', { templateUrl: 'views/orders/detail.html', controller: 'OrderDetailController' }). otherwise({ redirectTo: '/' }); }]);
Quello che otterremo con questa configurazione è che:
- navigando verso list, allora sarà utilizzare il controller OrderListController e la view list.html, nel percorso specificato;
- navigando verso details/{id}, allora sarà utilizzare il controller OrderDetailController, a cui sarà passato il nostro ID e la view detail.html, nel percorso specificato;
- in caso contrario, il browser tornerà alla home attraverso un redirect
A tal proposito, per recuperare il parametro di navigazione, ci basterà utilizzare un codice come quello che segue, posto all'interno del codice caricato in fase di partenza del controller e recuperato con $routeParams:
var myAppControllers = angular.module('myAppControllers', []); myAppControllers.controller('OrderDetailController', ['$scope', '$routeParams', function($scope, $routeParams) { $scope.id = $routeParams.id; }]);
Vedremo come, grazie a questa modifica, potremo utilizzare normalmente l'history del browser per navigare, consentendo all'utente di utilizzare in maniera più semplice la nostra applicazione web.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Routing statico e PreRendering in una Blazor Web App
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Reactive form tipizzati con FormBuilder in Angular
Utilizzare le collection expression in C#
Elencare le container images installate in un cluster di Kubernetes
Disabilitare automaticamente un workflow di GitHub (parte 2)
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)