jQuery: imitare il routing di AngularJS

  • jQuery
  • Gabriele Romanato

In jQuery è possibile imitare il routing di AngularJS ma con le ovvie differenze.

Partiamo da questa struttura HTML:


<body>
	<nav class="navbar navbar-default">
		<ul class="nav navbar-nav">
			<li><a href="#!/">Home</a></li>
			<li><a href="#!/contacts">Contacts</a></li>
			<li><a href="#!/portfolio">Portfolio</a></li>
		</ul>
	</nav>
	<div id="view"></div>	
</body>

Defiamo un oggetto con le nostre route e il codice per selezionare la route corrente:


var routes = [
	{
		url: "#!/",
		template: "partials/home.html",
		text: "Home"
	},
	{
		url: "#!/contacts",
		template: "partials/contacts.html",
		text: "Contacts"
	},
	{
		url: "#!/portfolio",
		template: "partials/portfolio.html",
		text: "Portfolio"
	}


];

var getCurrentRoute = function( url ) {
	var route = {};
	for( var i = 0; i < routes.length; ++i ) {
		if( routes[i].url == url ) {
			route = routes[i];
			break;
		}
	}
	return route;
};

Quindi cliccando su un link del menu di navigazione useremo il metodo AJAX .load() di jQuery per reperire i template e le API HTML5 per modificare l'URL nel browser:


$(function() {
	$( "a", ".nav" ).on( "click", function( e ) {
		e.preventDefault();

		var $a = $( this );
		var $ul = $a.parents( ".nav" );

		$ul.find( "li" ).removeClass( "active" );
		$a.parent().addClass( "active" );

		var url = $a.attr( "href" );
		var currentRoute = getCurrentRoute( url );
		
		$( "#view" ).load( currentRoute.template, function() {
			$( "#view" ).find( "h1" ).text( currentRoute.text );
			history.pushState( currentRoute, currentRoute.text, currentRoute.url );
		});
	});
	$( "a", ".nav" ).eq( 0 ).trigger( "click" );
});
Torna su