Angular ui.route

Question

I'm new to ui.router in Angular and have to build an app, which contains a header, sidebar (off-canvas), feedback area (save successful and warnings area) and a content area.

I thought it would be best if I split up all things and create different (nested) ui-views:

index.html

<div ui-view="head">loading...</div>
<div ui-view="sidebar">loading...</div>
<div ui-view="main">loading...</div>

head.html and sidebar.html

just some dummy text

main.html

<h1>main content</h1>
<div ui-view="feedback">loading...</div>
<div ui-view="content">loading...</div>

app.js

'use strict';

/**
 * @ngdoc overview
 * @name uirouterApp
 * @description
 * # uirouterApp
 *
 * Main module of the application.
 */
angular
  .module('uirouterApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    //'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.router'
  ])
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/overview/box');

        $stateProvider

            .state('app', {
                url: '/',
                abstract: true,
                views: {
                    'head@': {
                        templateUrl: 'views/head.html'
                    },
                    'sidebar@': {
                        templateUrl: 'views/sidebar.html'
                    },
                    'main@': {
                        templateUrl: 'views/main.html'
                    },
                    'feedback@app': {
                        template: 'loading...'
                    },
                    'content@app': {
                        template: 'loading...'
                    }
                }

            })


            .state('app.overview', {
                url: '^/overview',
                abstract: true,
                views: {
                    'feedback@app': {
                        template: '<div class="alert alert-success">sooo nice</div>'
                    },
                    'content@app': {
                        template: 'i am just some content <a ui-sref="app.overview.list">list</a>'
                    }
                }
            })

            .state('app.overview.box', {
                url: '/box',
                views: {
                    'feedback@app': {
                        template: '<div class="alert alert-warning">ui ui ui on box </div>'
                    },
                    'content@app': {
                        templateUrl: 'views/overview.box.html'
                    }
                }
            })

            .state('app.overview.list', {
                url: '/list',
                views: {
                    'feedback@app': {
                        template: '<div class="alert alert-info">ui ui ui on list </div>'
                    },
                    'content@app': {
                        template: '<a ui-sref="app.overview.box">overview.box</a>'
                    }
                }
            });

    });

Thoughts

• I defined an 'app' state, which defines all the default states for the header, sidebar and main content.

• I defined an 'overview' state. The official entry point of the app, also an abstract state, which could change the default settings.

• The 'list' and 'box' states are callable and sets the real content and if required the feedback too.

Please tell me what I can and should change to match the ui.route pattern.