Angular UI Routing Nested views not working

Question

Here is my index page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-ui-router.js"></script>
    <script src="js/NestedApp.js"></script>
</head>
<body ng-app="customApp">
    Index Level
    <a ui-sref="FirstPage">FirstPage</a>
    <div ui-view></div>

</body>
</html>

Here is my FirstPage

  <h1>Settings Level</h1>
    <hr />
    <a ui-sref="Firstpage.profile">Profile</a>
    <a ui-sref="Firstpage.account">Account</a>
    <div ui-view></div>

Here is my route,js

var app = angular.module('customApp', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('FirstPage',
        {
            //url:'/',
            url: '/',

            templateUrl: 'FirstPage.html',

        })
        .state('Firstpage.profile', {
            url:'/profile',
            templateUrl: '../profile.html'

        });

    $urlRouterProvider.otherwise('/FirstPage');
})

First Level routing works fine

Here is url for the first level routing http://localhost:59367/app/customIndex.html#/

When i click Profile link, here is the error i m getting

Error: Could not resolve 'Firstpage.profile' from state 'FirstPage'

Can someone help me with this

Gurbakhshish Singh · Accepted Answer · 2015-05-28 17:17:03Z

1

if you rename FirstPage to Firstpage then you will not have any problem.

this is because UI-Router consider FirstPage != Firstpage

your new states should be:

.state('Firstpage',
        {
            //url:'/',
            url: '/',

            templateUrl: 'FirstPage.html',

        })
        .state('Firstpage.profile', {
            url:'/profile',
            templateUrl: '../profile.html'

        });

and your ui-sref in root will change to:

<a ui-sref="Firstpage">FirstPage</a>

answered May 28, 2015 at 17:17

Gurbakhshish Singh

1,0741 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gurbakhshish Singh Over a year ago

the only problem is that Firstpage is spelled different

TechQuery Over a year ago

Thanks ... Just before I figured it out and was about to post the same but I got the answer from you as well. Thanks

Collectives™ on Stack Overflow

Angular UI Routing Nested views not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related