diff --git a/mockup/router/readme.md b/mockup/router/readme.md index 47847eeaed..93b4a69a72 100644 --- a/mockup/router/readme.md +++ b/mockup/router/readme.md @@ -67,3 +67,42 @@ left-to-center: Always left to center top-to-center: Always top to center bottom-to-center: Always bottom to center ``` + + +### Simple webdev: + +1. Give markup a url: Saving the file, CMS url, or creating an endpoint serversize (django, RoR, etc) +2. In the markup, add a link all the linked pages using `href=url` + +Pros: Simple. Its how the web works. + +Cons: Not ideal for web applications + + +### Ionic v1 + +1. Create the stateProvider +2. Create state name +3. Give the state a url +4. Set the state name of where the state should live (name the div) +5. Wire up this state to the controller +6. Wire up this state to the template +7. In the template, add a link to all the linked pages using `href=url` or `ui-sref=stateName` + +Pros: Centralizes all routes and URLs for easy management. Can update numerous sections of the webapp, rather than just one div. Deep linking: click to any view of the entire webapp from anywhere. Good for webapps. + +Cons: Many repetitive steps. Confusing what each of the variables actually do. Web devs aren't familiar with JS routing. + + +### Ionic v2 (without a markup shorthand) + +1. Create custom view component by extending base ionic view +2. Add template to component +3. Add DI of nav-view to the view's constructor's arguments +4. Add a click handler for every link +5. In each click handler, use `navView.push()` (would each view we link to require an import on that page?) +6. In the template, add the click handler to each of the linked views + +Pros: Decentralized routing. More like native apps and OO languages/frameworks. Only concerned about informing it's parent navView, rather than a global configuration. + +Cons: Decentralized routing. Creating click methods in JS and wiring them up in HTML. No/Difficult deep linking: Only can go forward and back. Only updates one div.