0

I am getting into SPA programming and have a working app with page.js. I searched stackoverflow and page.js but cannot figure out how to process the URL requests like /record/Name1 when a page is reloaded (or loaded after being shared or bookmarked).

The only way I see is to use history API and refer to an file like record.php?id=name. But I believe there are better / more beautiful ways as done on stockoverflow. Could someone point me to a tutorial or sample for the next step. I would like to avoid frameworks like jquery (but will use Polymer).

Here my test code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Page.js test</title>
    </head>

    <body style="font-family: sans-serif;">
        <h2>Menu:</h2>
        <div>
            <a href="/">Home</a><br>
            <a href="/records">Records</a><br>
            <a href="/record/Name1">Record/Name1</a><br>
            <a href="/record/Name2">Record/Name2</a><br>
            <a href="/index_1.html" rel="external">external</a><br>
        </div>
        <hr>
        <h2>Content:</h2>
        <p id="main"></p>
    </body>

    <script src="bower_components/page/page.js"></script>
    <script>
        page('/', function () {
            document.getElementById("main").innerHTML = "Home";
        });
        page('/records', function () {
            document.getElementById("main").innerHTML = "Records";
        });
        page('/record/:name', function (ctx) {
            document.getElementById("main").innerHTML = ctx.params.name;
            //history.pushState(null, null, ctx.params.name);
        });
        page({
            hashbang: false // do not add #! before urls
        });
    </script>
</html>

Thanks for the help.

MGR Programming
  • 655
  • 6
  • 10
  • in order for urls like `/record/:name` to work, you would have to use URL rewriting on the server to redirect those urls which are *unknown to the server* to the SPA for processing. there are plenty of guides that show how other frameworks like Angular handle this. – Claies Jul 30 '15 at 15:24
  • @Claies: Thanks for pointing me in the right direction. I still had trouble finding a tutorial or example till I found till I found the Adam Khoury video "Semantic URL htaccess Tutorial SEO Friendly Clean Links"(https://youtu.be/1pbAV6AU99I) – MGR Programming Jul 31 '15 at 19:12

0 Answers0