I have an index that serves a static header menu, and below that an ng-view that based on route, selects the right template. Like this for example:
<navbar>
...
</navbar>
<div ng-view>
</div>
Everything is good so far, when a specific route is hit, a template is loaded in that container with the associated controller.
Now, I have another page that is loaded inside ng-view, and it's fired when url "/dashboard" is hit. The problem is that the dashboard page, has a sidebar menu that also needs to contain some routing logic (more or less). When a link has been clicked from the sidebar menu, I have to load only the left hand side of the page (not the whole ng-view container).
I have identified two solutions:
1) Create a directive that stores that sidebar menu, and inject it in all of the pages that are handled by the sidebar menu ==> routing is still handled by ng-view.
2) Use ng-include and have some routing logic in the dashboard page like this:
<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 another approach? Or what is the best practice in handling both a sidebar that handles some routes, and a static menu that handles another routes, with the mention that the sidebar menu is only available on some of the routes.
I have provided a paint drawing, in the hope that I can explain my problem better.
Note Although it's possible for a component to render multiple templates, we recommend using an if:true|false directive to render nested templates conditionally instead. Create multiple HTML files in the component bundle.
You can simply extend your base component and overwrite the template. This allows you to have different components with the exact same functionality, but different templates. Save this answer.
AngularJS supports Single Page Application via multiple views on a single page. To do this, AngularJS has provided ng-view and ng-template directives, and $routeProvider services.
The angular component decorator provides a property called templateUrl and using this property you can set the external HTML file path. By default, angular creates an HTML file with the name app. component. html within the app folder when you create a new angular project.
You can use UI-Router and give a shot at nested views. Here is a really good tutorial. I think what you're trying to achieve is mentioned at the end of the tutorial.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With