Router best use, are templates better?

[danparker276]

I made a router for my spa, and it's working, but I just want to make sure I'm doing it right since there's no demo for routing and people have done it differently.
It looks like it works great, but do most people use angular for the routing?  I'd rather not load another library, but maybe there's more features, I don't know.  I can't seem to find may real world examples.

I saw a course on Plural site using it and they put everything in kendo templates. (main below is a kendo template render on the div root).

//Initialize New Router
router = new kendo.Router({
    init: function () {
        main.render("#root")
    }
});

For me, my root is never going to change, it's the header so I didn't put my main header in a view.  There's no benefit in the is there?

Is my following code good for my spa?  Should I add push state?  When I do, things mess up cus my site isn't on the '/' directory.

<section class="header main">
    <nav>
        <a id="nav-toggle" href="#"><span></span></a>
        <ul>
            <li><a id="linkHome" href="#">Home</a></li>
            <li><a id="linkClients" href="#">Clients</a></li>
            <li><a id="linkReports" href="#">Reports</a></li>
        </ul>
    </nav>
    <div class="brandmark">
        <img src="/images/brandmark-snap-light.png">
    </div>
    <div class="searchBox">
        <input type="search" class="k-input toggle">
    </div>
</section><!-- / .header.main -->
<div id="content" >

</div>

<script>
    var router;
    var menu;

    //Initialize New Router
    router = new kendo.Router({
       init: function () {
           router.navigate("HomeSA");
        }
    });

    router.route("/", function () {
    });

    router.route(":firstLevel", function (firstLevel) {
        $("#content").load("Content/" + firstLevel + "Page.html");
    });
    $(function () {
        router.start();
        $("#linkHome").click(function () {
            router.navigate("HomeSA");
            $('section.main.header ul').slideToggle();
            return false;
        });
        $("#linkReports").click(function () {
            router.navigate("Report");
            $('section.main.header ul').slideToggle();
            return false;
        });
        $("#linkClients").click(function () {
            router.navigate("Client");
            $('section.main.header ul').slideToggle();
            return false;
        });
    });

[Petyo]

Hello Dan,

the push state behavior needs an additional router configuration option - `root`. I would like to suggest that you review the router documentation for more details and samples. You may also review the sushi and aeroviewr sample applications source code - they are available in the bundle we ship. 

Apart from that, using AngularJS is also an option, but it is a full stack solution with a lot of other features. Of course, Kendo UI loves AngularJS, and we are committed to supporting that scenario too.

Regards,
Petyo
Telerik