For the past couple of days, I have been immersed in developing an AngularJS app. After two days of brainstorming, I have finally grasped how to utilize AngularJS's new router with components and ng-outlet feature.
However, just when I thought everything was falling into place, a new peculiar issue arose. My app primarily consists of two types of pages:
- The landing page (requiring only one ng-outlet)
- Other pages (needing three ng-outlets for the top navigation bar, side bar, and main content area as shown in the screenshot below)
My current dilemma is this - How can I dynamically create three ng-outlets in my index.html file when the user navigates from the landing page to another page? This dynamic creation would enable me to populate the top navigation bar component, sidebar component, and main content area accordingly.
Does anyone have any insights or suggestions on how to handle such scenarios?
Thanks & Regards
index.html code
<body layout="column" ng-controller="AppCtrl"> <div ng-outlet="navigation" id="navigation"> </div> <div layout="row" flex> <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"> <div ng-outlet="sidebar"> </div> </md-sidenav> <div layout="column" flex id="content"> <md-content layout="column" flex class="md-padding"> <div ng-outlet="main"> </div> </md-content> </div> </div> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-animate/angular-animate.min.js"></script> <script src="bower_components/angular-aria/angular-aria.min.js"></script> <script src="bower_components/angular-material/angular-material.min.js"></script> <script type="text/javascript" src="assets/js/router.es5.js"></script> <script type="text/javascript" src="assets/js/app.js"></script> </body>