jQuery Routing using Single Page Application without framework

Today, We want to share with you jQuery Routing using Single Page Application without framework.In this post we will show you Single Page Apps with jQuery Routing, hear for jquery routing framework we will give you demo and example for implement.In this post, we will learn about jquery single page application template with an example.

jQuery Routing using Single Page Application without framework

There are the Following The simple About jQuery Routing using Single Page Application without framework Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery single page application framework, so the some major jquery router, jquery routing , jquery router example is following below File structure.

Building a Single Page Webapp with jQuery

Sammy routing script is like

You Wull use simple Javascript sammy.js for routing. here, Sammy is a 5.2K + more jQuery all the dependent differents library

var app = $.sammy(function() {
 
  this.get('#/', function() {
    //your jquery router example function
  });
  this.get('#services/', function() {
    //your jquery routing function 
  });
  this.get('#contact/', function() {
    //your jquery router function
  });
});
app.run();

File structure

jQuery Routing using Single Page Application without framework

- index.html
- app.js 
- css
--- style.css 
- js
--- jquery-1.11.3.min.js
--- sammy.min.js
--- sammy.template.js 
- data
--- blogs.json
- templates
--- blog.template
--- blog-detail.template
--- services.template

HTML Markup Languages

index.html

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.html.

  
  
  
  
  
  

 

jquery router, jquery routing , jquery router example
  

    

      
    
  
 
  

    

      

      
      
    
  

Defining jquery Routes

app.js

//app.js
(function($) {
 
  var app = $.sammy('#app', function() {
    this.use('Template');
 
    this.around(function(callback) {
      var dataContent = this;
      this.load('data/blogs.json')
          .then(function(menus) {
            dataContent.menus = menus;
          })
          .then(callback);
    });
 
    this.get('#/', function(dataContent) {
      dataContent.app.swap('');
      $.each(this.menus, function(i, menu) {
        dataContent.render('templates/blog.template', {id: i, menu: menu})
               .appendTo(dataContent.$element());
      });
    });
     
    this.get('#/contact/', function(dataContent) {
        var str=location.href.toLowerCase();
        dataContent.app.swap('');
        dataContent.render('templates/contact.template', {})
               .appendTo(dataContent.$element());
    });
 
    this.get('#/blog/:id', function(dataContent) {
      this.menu = this.menus[this.params['id']];
      if (!this.menu) { return this.notFound(); }
      this.partial('templates/blog-detail.template');
    });
 
 
    this.before('.*', function() {
 
        var hash = document.location.hash;
        $("nav").find("a").removeClass("active");
        $("nav").find("a[href='"+hash+"']").addClass("active");
   });
 
  });
 
  $(function() {
    app.run('#/contact/');
  });
 
})(jQuery);

Angular 6 CRUD Operations Application Tutorials

Read :

• Technology
• Google Adsense
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery Routing using Single Page Application without framework.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this blog are always welcome.
If you enjoyed and liked this post, don’t forget to share.