Comments (8)
-
You'll have to be a bit more specific about "supporting good practice", but I believe the answer is "yes". URL routing works very similarly to how ui-router's does.
-
If I understand it correctly, then yes, you can create setups like that.
I also have an app that has a completely different interface for mobile versus desktop. In that case, I have different top level states, say
mobile
anddesktop
. You can make whatever child states you want. If you go this way, and you're at the statedesktop.account.profile
and you navigate to the statemobile.login
, every level of the UI would change.You could do browser detection yourself like this in your app's on-document-ready code:
var browser = require('detect-browser') if (browser.name === 'ios' || browser.name === 'android') { stateRouter.evaluateCurrentRoute('mobile.login') } else { stateRouter.evaluateCurrentRoute('desktop.login') }
-
The closest thing to a state view controller in abstract-state-router is the activate function you can supply, which is called when the states are activated. It is passed the DOM API (whatever rendering/templating library you chose) as well as other context about the newly activated state.
Like ui-router, anything you load in the
resolve
function is passed to your templating library of choice.When it comes to controllers or directives, that is outside of the scope of abstract-state-router. You pick your own templating/rendering library. Ractive.js and Riot are both solid popular choices.
abstract-state-router brings the power of ui-router, but without overriding your choice of front-end templating or DOM manipulation. If there is some other library you prefer (like React or even yo-yo), you can use it with abstract-state-router.
Do you have any specific questions? I would recommend reading over the API documentation (it's not too long) and checking out the source code of some of the example todo apps to see how the abstract-state-router can be used with different templating libraries.
from abstract-state-router.
Hey TehStrike,
Thank you for yoru fast reply.
- i geuss its ok then :)
- if thats possible then i want to use this state-router
- Im not familiar with template/rendering libraries.
The thing is this. I want to create an app. At the moment i want to focus just on the UI. Someone else will do the backend for me. For that app i want a simple easy to implement js (include into html) state router where i can just put the html parts into a main app html file based on a html tree as we discussed in point 2.
So my ideal situation is
- create a html file include the router js => abstract-state-router.js.
- then write the javascript with the states =>
init = app.html
root-state 1 = default.html
substate = default/about.html
root-state 2 = login.html
and voila it would work. My problem with all the new JS i see online there are 1000 other things i have to do to get something to work which eventually leads to all needlessly long learning curves.
I downloaded the zip for the abstract state router but it doenst tell me how i should implement this step by step for my project. this is what is for me lead to complexity. That does not mean that what your doing is wrong but my experience with javascript on this lvl is maybe a bit too complicated.
I read through most of the readme of git then i see i need browserify so i go check some tutorials on that nice but then i when i try to look at a riot example i dont see this abstract-state-router anywhere in that riotjs implementation.
Few question on which i will decide on what to do
-
Can or IS abstract-state-router only intended to be used in combination with other libraries/framework? Could you make an app and have sbstract router on itself?
-
could you make an starter app that handles all requirements i have i believe this is such a used setup that it should be standardized.
Kind Regards
Gavarni
ps: m still trying to get my head around this things so ill keep on watching tutorials and videos on riotjs and the implementations you showcase with sbstract router
from abstract-state-router.
Frameworks
abstract-state-router is not a framework. I agree with Peteris Krumins that frameworks don't make sense for developers who want to build an application.
abstract-state-router is a library that is meant to be used with other libraries. There are many, many options for turning a template into HTML for the browser, and I don't want to tie this useful webapp routing to one of them.
I don't actually know what gets packaged up in the zip file, but it's probably not useful. abstract-state-router is mean to be installed from npm, though you can download the compiled version from wzrd.in as well. In either case, you'll want to use it with one of the renderers that act as a go-between for this library and your rendering/templating library of choice.
Starter apps
"Starter app" usually implies a complicated build system that someone else made that you won't ever look at, even though there are lots of things about it that you might not like that much. For getting-off-the-ground projects like the one you're starting, I prefer to use npm run scripts.
You could consider the state-router-example repository to be a starter app, though - if you clone it locally and run npm install
, you can run the build/development scripts for any of the different implementations. You can edit any of the HTML files and see which templating system you prefer.
You can also look at the package.json file to see what all of the npm run scripts are doing (which isn't much, they mostly just call browserify/watchify).
fin
I'm not interested in tying myself or anyone else to a frameworkey development ecosystem, so you should be able to use abstract-state-router with Grunt and Rollup as easily as npm run scripts and Browserify. If you learn to use those tools, and find you prefer them, you can switch over to them, and the abstract-state-router shouldn't get in your way.
Out of curiosity, how did you find out about this library?
from abstract-state-router.
@Gavarni - you may be interested in https://github.com/TehShrike/simplest-abstract-state-router-usage, an example of using the state router without any build steps or other dependencies. It uses Ractive for html templating, but you could easily switch it out for Riot or anything else you prefer.
from abstract-state-router.
Hey TehStrike sorry for my late reply i was in germany.
I also agree on the framework part which is why i dont want to use angular1 or 2. im not really familiar with renderes. If you mean template engine like scala in the java world. Then thats not what im really looking for. What i basically need is a simple standalone sorta router with a few lines that can dynamically load JS for me into a div or custom tag and that i can build my app in a modular way.
For a starter app i didnt actually mean comlicated but a simple example with just bareminimal code to show how the router works so that you can take the essential code parts and make your own.
I came on your router through searching the web i was looking for simpeler solutions without an entire framework. and used names like state-router in my search query
from abstract-state-router.
I just cloned the example you linked to me
Very clear and to the point :). Ill use this as an starting point for building my app. The moment im about to launch my app if im at that point ill offcourse add all credit for the routing to your state router.
The only part im going to have to figure out is the how the top states work.
I asume i declare on this part the top state
var stateRouter1 = abstractStateRouter(ractiveStateRenderer, '#app-content'), var stateRouter2 = abstractStateRouter(ractiveStateRenderer, '#app-content')
from abstract-state-router.
You only need one state router - you should only call abstractStateRouter
once.
You add more states by calling stateRouter.addState.
Top-level states are just state names without any periods in them. State a
would be a top-level state. a.b
would be a b
state that was a child of the a
state. a.c
would be another state that was a child of a
. But if you added a state named x
, it would be another top-level state, a sibling of a
. Then you could add x.y
and x.z
, which would be children of this other top-level state x
.
In that "simplest-abstract-state-router-usage" example, the renderer I hooked up allows you to render Ractive templates. You can see some of the mustache templating in action on the lines with the curly-braces. Eventually, you'll need to know more about those - you can find that documentation here.
from abstract-state-router.
If you have any other questions, feel free to ask!
from abstract-state-router.
Related Issues (20)
- Ignore parameters that are not used by any state HOT 3
- No way for children to depend on route parameters of ancestors HOT 2
- Eliminate references to node modules HOT 2
- Need to allow for adding custom hash fragments HOT 1
- When using root path '/' the page doesn't render on refresh HOT 9
- Why doesn't it scroll to the top when you navigate between states HOT 1
- Proposal to implement empty state HOT 4
- When using pushState routing, encodeURI should be used instead of encodeURIComponent
- Reloading current route HOT 22
- A dot/period(.) in url for a named parameter returns an error HOT 3
- Adding multiple keyed templates for a state HOT 6
- Possible to send actual objects via callback.redirect? HOT 10
- Push state routing not working with "defaultChild state with an empty route string" HOT 1
- It is possible for `makePath` to return a url that will not be matched by the router
- Non-async resolve results in confusing behavior HOT 1
- Lazy-loading states HOT 3
- State name should be optional to `state.go` HOT 4
- Get browserstack tests passing again HOT 1
- Modern JS features HOT 5
- Default values for route parameters HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from abstract-state-router.