Set Default View for multiple states AngularJS ui.router

Question

I have multiple views in an angular application. Currently, I am using ui.router's $stateProvider to establish the views. However I find this very tedious as I have to repeat each of the views in every state. Is there a way to set a default view for all states rather than repeat them in every state?

$stateProvider
.state('default', {
    url: '/default',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})
.state('changed_state', {
    url: '/changed_state',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})

I want to only have to list the default views for all states once, and then only change the views that change with each state change. i.e.:

.state('default', {
    url: '/default',
    views:{
        view_1: {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        view_2: {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        view_3: {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    }
})
.state('changed_state', {
    url: '/changed_state',
    views:{
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        }
    }
})

Thanks

Answer 1

Exactly that in is already there in UI-Router architecture:

Nested States & Nested Views

We will just declare a super base state (e.g. 'root'). It could even be abstract to avoid its initialization - but does not have to. And this state will define all the default views. Any child state or grand child state can replace any of these defaults:

The root state

 .state('root', {
    // url: '/default', - no url needed at all, but could be
    abstract: true
    views:{
        '' : { templateUrl: 'layout.html'},

        'view_1@root': {
            templateUrl: 'view1',
            controller: function($scope){}
        },
        'view_2@root': {
            templateUrl: 'view2',
            controller: function($scope){}
        },
        'view_3@root': {
            templateUrl: 'view3',
            controller: function($scope){}
        }
    });

What we can see above, is that the root state injects into index.thml <div ui-view=""></div> its own template - the layout template:

'' : { templateUrl: 'layout.html'},

So all the named views inside of layout.html could be right now filled with default views, we just have to use the absolute naming (see below more)

'view_1@root': { // this will inject into the layout.html of current root state

Some more interesting points. We do not use url... so all child states can define its own. We use abstract... but it is not a must.

Child states - this is the way how to profit from parent

.state('changed_state', {
    parent: 'root'           // this way we profit from parent
    url: '/changed_state',
    views:{
        view_2: {
            templateUrl: 'changed_view2',
            controller: function($scope){}
        },
        // HERE all other views are unchanged 

Also check the:

Multiple Named Views

and

View Names - Relative vs. Absolute Names

to understand more the naming 'view_1@root' (small cite)

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, e.g. contact.item. You can also choose to write your view names in the absolute syntax.