- SPA Apps Overview
- What is a SPA app?
- Simple routing with a jQuery plugin
- Configuration
- Creating Routes
- Creating a simple SPA app
- SPA apps are WEB apps with a single HTML file
- Yet, they have many fake pages
- Each page is dynamically created with JavaScript
- Yet, they have many fake pages
- The routes of SPA apps mimic the common URLs of WEB applications:
.../#/homeinstead of.../home.php.../#/mediainstead of.../Media.aspx
- Navigation is with links between different urls
- 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
- There are so many frameworks for creating SPA apps
-
Basic libraries for creating routing
- Easy to use
- Create routes that map to the HTTP requests
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)- Installation
npm install navigo
- and
<script src="./node_modules/navigo/lib/navigo.js">< script/>- Initializing
const router = new Navigo(root = null, useHash = false);- Each route maps to the provided URL
- Appending the route to the base URL
- Example:
- The app is running at
- The route is:
router.on('/home', callback)- This maps to
- 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();- 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');- Route with params in the URL:
#/items/:id- Maps to
#/items/123and#/items/this_is_some_id
- Maps to
router.on('items/:id', (params) => {
var id = params.id || '';
});- Default route:
#items- Can have query params:
#items?name=John&age=19
- Can have query params:
- Example:
- Maps to
#itemsand#items?name=John:
- Maps to
router.on('items', (params) => {
var name = getQueryParams().name;
});- 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
});
})- "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy
- javascript course
- Telerik Software Academy
- Telerik Academy @ Facebook
- Telerik Software Academy Forums