I am building a support web front-end for our team from where we can perform various support functions for a number of different sites at which our products run. This typically involves running some sort of data query and viewing results to solve specific process issues.

Each user is given access to which sites he may support, and then to which functions within that site he can perform. So my top navigation is the list of sites to which you have access, and then as you click on a site menu item, it loads a side nav with a menu item for each function you can perform on that site's portal.

Front-end is AngularJS with Bootstrap CSS. Data is called via ASP.Net Web API and some WCF Services RESTful calls.

I have an AngularJS FunctionController that, via routing, displays a function.html view when clicking on the side nav. How do I link a dynamic view to each function/side-nav menu item instead of just having one function view for all the sidenav items?

Each function, thus sidenav menu item, has a specific Web API path to call linked to that particular function. Thus each function's UI will be very different. I could place an html view name in my MS SQL Functions table, where I store the function name, Web API call etc, but how would I pull that through to the AngularJS routing? Or place it in the sidenav menuitem's html somehow?

  • 3
    As a note : for complex navigation, you'd better go with ui-router which is an alternative to angular-router. You can use angular-resource to handle the Webs API. Basically expect the very architecture, youwill likely find an angular component to do the job for you ;)
    – Walfrat
    Dec 29, 2016 at 20:20

2 Answers 2


A bit of fiddling and I found a solution: partial views with ngInclude. The URI path part that I store in the database (equates to a function) can also double up as a name for a partial view. So for each function, I just need to create a matching [functionUri].html view. Then I invoke that via ng-include in my function.html view like this:

<div class="container">
  <h3>Function: {{vm.theFunction.ShortName}}</h3>
  <div class="row" ng-include="'app/functions/'+vm.theFunction.FunctionUri+'.html'">

Not sure this is the most elegant but should work for now.

I'm open to any other suggestions. Cheers


You can use the ng-react directive.

  • 2
    Elaborate please
    – Neville
    Sep 1, 2016 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.