Search code examples
angularjsuiviewangular-ui-routerui-sref

Angular UI-Router ui-view in ui-view

I have ui-view in index.html and I have a page for info and there I want to put second ui-view with 4 links.

In my index.html 

<body ng-app="myApp">
    <div ui-view></div>
</body>

This is my info. I want to open default in info.html a page info-number.html.

<div class="col-sm-8" style="border:1px solid; min-height:
  <h1>Some text</h1>
  <div ui-sref></div>
</div>

This is my app.

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state("home", {
        url: "/home",
        templateUrl: "home.html"
    })
    .state("info", {
        url: "/info",
        templateUrl: "info.html",
    })
    .state("info-number", {
        abstract: true,
        parent: "info",
        url: "/info-number",
        templateUrl: "info-number.html"
    })
    .state("info-about", {
        parent: "info",
        url: "/info-about",
        templateUrl: "info-about.html"
    })
    .state("info-where", {
        parent: "info",
        url: "/info-where",
        templateUrl: "info-where.html"
    })
  }
]);

Schema of my page for info

Schema of my page for info

Thanks for help.

Solution

  • You don't need put info-number to be abstract even if its default.

    Your abstract view should be info. So when user clicks on "info" link (button) you can just redirect him to info/info-number as default.

    I would write it as:

    $stateProvider
        .state("home", {
            url: "/home",
            templateUrl: "home.html"
        })
        .state("info", {
            url: "/info",
            abstract: true,
            templateUrl: "info.html",
        })
        .state("info.info-number", {
            url: "/info-number",
            templateUrl: "info-number.html"
        })
        .state("info.info-about", {                
            url: "/info-about",
            templateUrl: "info-about.html"
        })
        .state("info.info-where", {               
            url: "/info-where",
            templateUrl: "info-where.html"
        })

    The info.html has structure similar to:

    <div>
    <h1>Some Text</h1>
    <div ui-view></div>
</div>