Angular UI-Router Default State Issue

Question

I'm trying to setup Angular routes/states that work like this:

(pseudocode)

/homepage
   defaultstate: homepartial.html

/projects
    defaultstate: projectHome.html

/projects/editProject
    url: projectForm.html

So views would end up like this:

Home: 
    index.html (includes site header and navbar)
        main view ---> home-partial.html

myProjects: 
    index.html
        main view ---> projectHome.html
                           main view ---> project-home-partial.html (shows list of projects)

editProject: (clicking on a project on projectHome.html)
    index.html
        main view ---> projectHome.html
                           main view ---> projectForm.html

I'm trying to build nested states to achieve this but I seem not to have grokked entirely how it works. Here's my routing setup:

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider.otherwise('/');

    $stateProvider
        .state('/', {
            url: '/',
            controller: 'org.mi.novum.controllers.NovumBaseCtrl',
            views: {
                '': {
                    templateUrl: 'app/main/main.html'
                },
                'main@/': {
                    templateUrl: 'app/main/home-partial.html',
                    views: {
                        'myProjects@main@/': {
                            url: '/myProjects',
                            templateUrl: 'app/project/myProjects.html'
                        }
                    }
                }
            }
        })

At the moment the standard home route works, showing the index page with the home-partial nested in it. But when I click the link to go to the myProjects page it doesn't work - no errors, just nothing happening.

Link looks like this: <a class="btn btn-primary btn-lg" role="button" ui-sref=".myProjects">My Projects</a>

I guess what I'm trying to do is define routes like "editProject" which will ultimately lead to /index.html -> myProjects.html -> EditForm.html, if that makes sense.

Any direction would be much appreciated, including whether there's a better way to achieve what I want.

Answer 1

Found the problem - I was doing two things wrong:

1) I had forgotten the original index.html generated by the angular-fullstack yeoman generator already had the ui-view directive in it, and I'd confused myself while trying to port an existing project in, starting with main.html. In short, I got rid of main.html, added the ui-view directive to a div on projectsHome.html and then setup my routes as below.

2) I was also at times conflating "states" and "views". Correct concept: The state is EditProject, which takes us to the ProjectHome page with the sub-view set to "projectForm.html".

 $stateProvider
        .state('/', {
            url: '/',
            templateUrl: 'app/main/home-partial.html',
            controller: 'org.mi.novum.controllers.NovumBaseCtrl'
        })
        .state('myProjects', {
            url: '/myProjects',
            views: {
                '': {
                    templateUrl: 'app/project/myProjects.home.html'
                }
            }
        })
        .state('editProject', {
            url: '/myProjects/projectEditor',
            views: {
                '': {
                    templateUrl: 'app/project/projectForm.html'
                }
            }
        });

As you can see we go by default to home, which includes the home partial in it's main view. Then when we click a link to myProjects, we go to the myProjects home, with the myProjects.home.html partial included as the default sub view.

When we click the editProject link that's rendered in myProjects.home.html, it takes us to the editProject state, which loads the projectHome.html page with the default view of projectForm.html.