-1

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?

Improve this question
1
  • 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
    CommentedDec 29, 2016 at 20:20

2 Answers 2

Reset to default
0

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'"> </div>

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

I'm open to any other suggestions. Cheers

Improve this answer
    -4

    You can use the ng-react directive.

    Improve this answer
    1
    • 2
      Elaborate please
      – Neville
      CommentedSep 1, 2016 at 15:00

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.