Skip to content

Latest commit

 

History

History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

README.md

Simple SPA Apps with Sammy.js and jQuery

With routes, AJAX and stuff

JavaScript Applications

Telerik Software Academy

https://telerikacademy.com

Table of Contents

Single Page Applcations Overview

Many pages in a single page?!

SPA Apps Overview

  • SPA apps are WEB apps with a single HTML file
    • Yet, they have many fake pages
      • Each page is dynamically created with JavaScript
  • The routes of SPA apps mimic the common URLs of WEB applications:
    • .../#/home instead of .../home.php
    • .../#/media instead of .../Media.aspx
  • Navigation is with links between different urls

Why JavaScript Routing?

  • Browser apps sometimes lose:
    • Proper handling of the browser's back button
    • The ability to deep link
    • Takes time to load a complex in-browser app
      • Initializing objects, functions, event handlers
  • Routing is a way of organizing and managing application states
  • But finding/fetching the right data and right view is the responsibility of the browser app

SPA Apps Frameworks

Routing Libraries Overview

Routing for a basic SPApp

jQuery plugin Overview

var router = new Navigo(null, false); // (root, useHash)
router.on('book/:id/note/:noteId', params => loadBook(params))
    .resolve();
page('/', index)
page('/user/:user', show)
page('/user/:user/edit', edit)

Using Navigo

  • Installation
npm install navigo
  • and
<script src="./node_modules/navigo/lib/navigo.js">< script/>
  • Initializing
const router = new Navigo(root = null, useHash = false);

Navigo: Creating Routes

  • Each route maps to the provided URL
    • Appending the route to the base URL
  • Example:
router.on('/home', callback)

Navigo: Routes

  • Multiple routes
    • In this case ordering matters
router.on('/products/list', () => { ... })
      .on('/clients/list', () => { ... })
      .resolve();
  • In this case ordering does not matters
router.on({
  '/products/:name': () => { ... }, 
  '/products': () => { ... }
})
      .resolve();

Navigo: Routes

  • Main/root handler
router.on(function () { // show home page here }).resolve();
  • Parameterized URLs
router.on('/user/:id/:action', function (params) {
    // If we have http://site.com/user/42/save as a url then
    // params.id = 42  // params.action = save
  }).resolve();
  • Changing/navigating to page
router.navigate('/products/list');

Sample Routes

Types of Routes

What routes can be mapped?

Types of Routes:
Params in URL

  • Route with params in the URL: #/items/:id
    • Maps to #/items/123 and #/items/this_is_some_id
router.on('items/:id', (params) => {
  var id = params.id || '';
});

Types of Routes:
Query Params

  • Default route: #items
    • Can have query params: #items?name=John&age=19
  • Example:
    • Maps to #items and #items?name=John:
router.on('items', (params) => {
  var name = getQueryParams().name;
});

Default Routes with Query Params

Simple SPA

  • Example: Listing items
router.on('items', () {
    data.items.get().then(function(res) {
        var items = res.result;
        //show all items, with links to items/:id
    })
}).on('items/:id', (params) => {
    data.getById(params.id)
      .then(function(res) {
          var item = res.result;
          //show specific item
      });
})

Simple SPA

Questions

Simple SPA Apps with
Routing and jQuery AJAX

Free Trainings
@ Telerik Academy