Angular JS – Nesting Views with the “@” syntax (SPA Routing)

With the “@” syntax I can more easily define how nested states (or should be better to say nested views) should be managed. With this syntax I don’t have to define states for the templates, but just which view/controller I want to be displayed at any level of the templates hierarchy.

For example let’s imagine to have this main page:

<div ng-app="app">
    <div ui-view="">
    </div>
</div>

I can define a “root” state in this way:

$stateProvider.state("root", {
    url: "/",
    views: {
        "": {
            templateUrl: 'app/views/layout.html',
            controller: 'layoutController'
        },
        "topArea@root": {
            templateUrl: 'app/views/rootTopArea.html',
            controller: 'rootTopAreaController'
        },
        "bottomArea@root": {
            templateUrl: 'app/views/rootBottomArea.html',
            controller: 'rootBottomAreaController'
        },
        "bottomTopArea@root": {
            templateUrl: 'app/views/rootBottomTopArea.html',
            controller: 'rootBottomTopAreaController'
        },
        "bottomBottomArea@root": {
            templateUrl: 'app/views/rootBottomBottomArea.html',
            controller: 'rootBottomBottomAreaController'
        }
    }
});

What I’m saying is that for the view “” (the main one with no name) I want to load the layout.html view and I want to use the “layoutController” controller. Now let’s imagine that the layout.html view is made in this way:

<h2>This is the layout</h2>
{{value}}
 
<ul>
    <li>
        <div ui-view="topArea">
        </div>
    </li>
    <li>
        <div ui-view="bottomArea">
        </div>
    </li>
</ul>

Here we have two nested sub-view called “topArea” and “bottomArea”. With the “@” syntax I don’t have to specify new states (as when using the “.” syntax), but I just have to say that the “topArea” sub-view (for the “root” state, so “topArea@root”) should load the rootTopArea.html view and should use the “rootTopAreaController” controller. The same thing I’m doing for the “bottomArea” sub-view.

Finally let’s say that the rootBottomArea.html view is made in the same way as the layout.html view: with two sub-view inside. These are third level sub-views, so how should e manage this?

<h2>This is the root bottom area</h2>
{{value}}
 
<ul>
    <li>
        <div ui-view="bottomTopArea">
        </div>
    </li>
    <li>
        <div ui-view="bottomBottomArea">
        </div>
    </li>
</ul>

Simple, in the same way! We don’t need to follow the hierarchical structure of the sub-views’ tree, we just need to refer the sub-views’ names within our configuration. So we just have to specify the view and the controller for the “bottomTopArea@root” and the “bottomBottomArea@root” views.

And here is the final result:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s