在index.html中设置多个ui视图时不显示

Question

I'm trying to implement something as shown in the Multi-Named-Views wiki page of ui-router . The example is the following:

$stateProvider
  .state('report', {
    views: {
      'filters': { ... templates and/or controllers ... },
      'tabledata': {},
      'graph': {},
    }
  })

With my current setup as seen below, the routing is not working. Not sure what I'm doing wrong here?

My current index.html looks like this:

<body>
    <div ui-view="anonymous"></div>
    <div ui-view="home"></div>
</body>

Then my app.js:

app.constant("AccessLevels", {
    anon: 0,
    user: 1
});

    app.config(["$stateProvider", "$urlRouterProvider", "AccessLevels", function ($stateProvider, $urlRouterProvider, AccessLevels) {

        /* ANONYMOUS USERS */
        $stateProvider
            .state('anon', {
                abstract: true,
                template: '<ui-view/>',
                data: {
                    access: AccessLevels.anon
                }
            })
            .state('anon.login', {
                url: '/login',
                views: { 
                    anonymous: {
                        templateUrl: 'Client/scripts/app/partials/account/login.html',
                        controller: 'loginCtrl'
                    }
                }
            })
            .state('anon.register', {
                views: {
                    anonymous: {
                        url: '/register',
                        templateUrl: 'Client/scripts/app/partials/account/registration.html',
                        controller: 'registerCtrl'
                    }
                }
            });

        /* AUTHENTICATED USERS */
        $stateProvider
            .state('user', {
                abstract: true,
                template: '<ui-view/>',
                data: {
                    access: AccessLevels.user
                }
            })
            .state('user.home', {
                views: {
                    'home': {
                        url: '/home',
                        templateUrl: 'Client/scripts/app/partials/home/dashboard/index.html',
                        controller: 'homeCtrl'
                    }
                }
            })
            .state('user.deliveries', {
                views: {
                    'home_content': {
                        url: '/home/deliveries',
                        templateUrl: 'Client/scripts/app/partials/home/deliveries/deliveries.html',
                        controller: 'deliveryCtrl'
                    }
                }
        });

        $urlRouterProvider.otherwise('/login');
    }]);

Answer 1

In general, we can use simplified, so called relative view target names only, if we target the parent. And that is not your case, because

.state('anon', {
    abstract: true,
    template: '<ui-view/>', // parent contains unnamed view
    ... 
})
.state('anon.login', {
    url: '/login',
    views: { 
        anonymous: { // this view is not in parent

So we have to use absolute naming

.state('anon.login', {
    url: '/login',
    views: { 
        'anonymous@': { // no we target root
        // realtive
        '' : { // here we target unnamed parent view
        // absolute
        '@anon' : { //the same as the line above

A link to doc:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename , where viewname is the name used in the view directive and state name is the state's absolute name, eg contact.item . You can also choose to write your view names in the absolute syntax.