Multiple AngularJS Templates on One Page

Question

I have an index which serves for the static menu of the title, and below - ng-view, based on the route, selects the correct template. For example, for example:

<navbar> ... </navbar> <div ng-view> </div> 

So far, everything is fine, when a specific route hits, the template is loaded into this container using the appropriate controller.

Now I have another page loaded inside ng-view, and it starts when the URL "/ dashboard" hits. The problem is that the dashboard page has a sidebar menu, which should also contain some routing logic (more or less). When the link was clicked from the sidebar menu, I need to load only the left side of the page (not the entire ng-view container).

I have identified two solutions:

1) Create a directive that stores this sidebar menu and enter it on all pages that are processed by the sidebar menu ==> Routing is still processed by ng-view.

2) Use ng-include and the toolbar page has routing logic, for example:

  <a ng-click="templateType = 1">Template 1</a> <a ng-click="templateType = 2">Template 1</a> <div ng-if="templateType === 1" ng-include="template1" ng-controller="Template1Controller"></div> <div ng-if="templateType === 2" ng-include="template2" ng-controller="Template2Controller"></div> 

Is there any other approach? Or what is best suited for handling both the sidebar that handles some routes and the static menu that handles other routes, with the mention that the sidebar menu is available only on some routes.

I presented a drawing of the drawing, hoping that I could better explain my problem.

Answer 1

You can use UI-Router and take a snapshot on nested views. Here is a really good tutorial . I think that what you are trying to achieve is mentioned at the end of the lesson.

Answer 2

Like everyone else, you need to switch to the UI router and subviews. This is a great way to customize your page layout.

You can find the answer in Angular UI-Router. How to create a “layout” state?