Spa Router v3
A router developed with TypeScript with :
- 2 modes : html5 history,hash
- page animation/transition with css or js
- active elements
- route guards
- child routes
- actions
Installation
npm i sparouter -S
Workflow
With TypeScript / es6
We could use a starter kit.
With es5
Its possible. Reference the lib in the main page.
;
Router & route configs
Router config | Description |
---|---|
mode | hash (by default) and html5 history. |
scroll | handle navigation to fragment (true by default) |
Route config | Description |
---|---|
path | the path pattern ("/posts" or "posts/:id" or "/posts/:id([a-z]+)" for example) |
name | route name |
action | an action |
actions | an array of actions |
data | extra data to pass |
canActivate | route guards |
canDeactivate | route guards |
redirectTo | redirect to route url |
children | nested routes |
; const routes = path: "/" documentinnerHTML = "<h1>Home</h1>" path: "/posts" path: "/posts/:id" canActivate: MyGuard console path: "**" redirectTo: "/" ; mode: "html5";
With html5 history mode (uris without '#'), the server have to redirect to index page.
The base tag with html5 history mode allow to set the base path. Examples:
or
Param regex (number by default)
Example:
const routes = path: "/posts/:id([a-z]+)" /* etc. */ ;
Named routes:
const routes = name: "home" path: "/" /* etc. */ name: "posts" path: "/posts" /* etc. */ ;
Route with actions (array of functions)
const routes = path: "/" actions: documentinnerHTML = "<h1>Home</h1>" console /* other actions */ ;
Its possible to pass an "action result" to the next action
const routes = path: "/" actions: { return "a" "b" "c"; } { console; } ;
... Or with a promise
const routes = path: "/" actions: { return { ; }; } { console; } ;
children
const routes = path: "/" templateUrl: "src/views/home.html" path: "posts" children: path: "" { /* do something */ } path: ":id" actions: /* do things */ ;
Links
With hash mode
HomePostsWith parameterQuery and fragment
With to attribute: the best way to switch easilly between "hash" and "html5 history"
HomePostsWith parameterQuery and fragment
Active attributes
- active-class the css class to add if active
Posts
- active-path allow to set a regex pattern or to add on any element ("li" for example)
- active-exact the css class is only added if path + query + fragment equal to link href or active-path
Details<!-- with active-path -->Details
Navigate programmatically
Navigate by route name
router;// with parameterrouter;// with query and fragmentrouter;
Navigate by url
router;// with parameterrouter;// with query and fragmentrouter;
Go back
router;
Go forward
router;
render function
Allow to render content in an HTMLElement, and create an instance of a vm and pass args.
; { // route with params, query, fragment and data } const routes = path: "/posts" path: "/posts/:id" ;
Async await or promises
Allow to wait the end of the action before reach the next
Example with async await
{ return { ; };} const routes = path: "/" action: async await ;;
Example with promise
const routes = path: "/" { return { ; }; };
Page transition
with navigate function
Animation "leave" and "enter" (could be played simultaneously)
Example simple , a slide in / slide out
const routes = path: "/" ;
Other example "Shuffle" on the container and
const routes = path: "/" ;
Before each and after each
Usefull for page animations with javaScript (SVG for example)
var router = ;
Route guards
{ return ; } implements CanActivate CanDeactivate { let result = ; ; } { let vm = activeVms"PostDetail"; let result = vm && vmcheckDeactivate ? vm : true; ; }
Example route with guard:
const routes = path:"/posts/:id" canActivate: MyGuard canDeactivate: MyGuard /* etc. */ );
Or register with injector
injector; const routes = path:"/posts/:id" canActivate: "MyGuard" /* etc. */ );
injector
Allow to inject services
Example
Create and register a service
{ this { // return some data }}injector;
Inject the service
{ }injector;
Register a secure service (service is not returned with getInstance/ getNewInstance and cannot be removed)
injector;
Chaining registrations
injector ;
Get an instance (create or get a cached instance)
let instance = injector;
Get a new instance
let instance = injector;
Invoke a function with Injector
injector;
View usefull functions
Allow to select and animate HTML elements.
; ; ;