mrkibzk mrkibzk - 1 year ago 76
AngularJS Question

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

tnx for help

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download