1

From couple of days I'm working on angularjs app. After 2 days of brain storming now I got to know how to use angularjs's new router+components+ng-outlet stuff.

Now, after moment of happiness one more strange problem came up. That is - In my app mainly 2 kind of pages are there.

  • Landing page (where I need only 1 ng-outlet)
  • Other pages (where I need 3 ng-outlet. It's like top navigation bar, side bar & main content area. See below screenshot )

enter image description here

So what i want, when user will move from landing page to some other page how i create dynamically 3 ng-outlet in my index.html file. So that, I can populate my top navigation bar component, side bar component & main content area.

Any clue, how to do handle such kind of situations ?

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>

Suresh
  • 5,687
  • 12
  • 51
  • 80

1 Answers1

0

I was facing the same issue, my workaround was to create a void component, with an empty controller and this template: "<div style='display:hidden;'></div>"

So, whenever i want to make a component "disappear" I assign it the void component, like this:

function appController($router) {
    $router.config([
        { path: '/', redirectTo: '/splash' },
        { path: '/splash', components: { left: 'void', main: 'splash' } },
        { path: '/left', components: { main: 'splash', left: 'left' } }
    ]);
}

Hope it helps, Renato

uxp
  • 3,209
  • 1
  • 15
  • 16
khalla
  • 3
  • 2
  • Your solution seems fine. But I'm using Angular Material design(https://material.angularjs.org/latest/#/) & whenever I try to implement your technique material design CSS is not working properly. Above I've included my index.html code. For implementing your technique all the material design code should be inside of "ng-outlet" & if I'm doing that all CSS of material design are not working. – Suresh Jun 14 '15 at 05:35
  • Yes, i came across the same problem when using angular-material. And yes, i moved that content to the template of component. Yet, even if you could use null or undefined in the route definition to specify its visibility. You would end up with the ng-outlet "hidden", so the issue remains. I see by your code that your are implementing an md-sidenav, think in terms of that sidenav is it self a component, so it makes sense to have it as such, moving the md-sidnav to the component template. – khalla Jun 18 '15 at 21:36
  • according to Pete Bacon this is not available in the current ngComponentRouter. – Winnemucca Feb 09 '16 at 18:27