Hot Towel AngularJs Subroute

Question

I am using Hot Towel AngularJs SPA that John Papa created. I wanted to know how can I change the current menu to have sub menus.

[Edited] The base implementation of HotTowel menu is looping into all routes and show it on the side bar. What I wanted to do is if there are sub-menu for one of the routes then it's content will be grouped in one menu item. similar to dropdowns sub menu

Answer 1

Don't forget that you're working with Models, and Controllers.

The Angular model and controller work in concert with the View John built.

public class HotTowelController : Controller
{
    //
    // GET: /HotTowel/

    public ActionResult Index()
    {
        return View();

Notice that the Index is the View.

Ok.

look at the url when you run the page.

name

notice that its not loading another page.

That's because it's a SPA framework.

The Index has a Javascript method where we are defining the roles outside of the .NET Framework / MVC

So, we have a modeljs and a controllerjs. Just like MVC we have to use all three. But use those in the APP folder.

The APP Folder

Admin Common dashboard layout services

viewmodels

views

etc...

So

Go to the Layout Folder

open topnav.html

THen read the viewmodels

shelljs

var routes = [
            { route: '', moduleId: 'home', title: 'Reserve a Seat', nav: 1 },
            { route: 'details', moduleId: 'details', title: 'Poker Details', nav: 2 }];

        return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
            .map(routes)            // Map the routes
            .buildNavigationModel() // Finds all nav routes and readies them
            .activate();            // Activate the router
    }

Seee what's happening here. We are mapping, knockout and angular have very easy mappings.

http://knockoutjs.com/documentation/plugins-mapping.html

This is an easy way to learn, and the vm is the smae for both only angular your using npm with a much more defined library in open source. both are mit so can't go wrong there.

then look at the config config.route mainjs

What do you see: Are you getting it?

Need more?