Angular JS – Nesting States (SPA Routing)

I can have the ui-view directive inside the templates of a state. Doing in this way I can have sub-states which can define the templates for its views in a recursive way. A state which can contain other states can be considered as a template and works for its sub states as the page works for it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body data-ng-app="myApp">
    <div class="container">
        <div class="row">
            <div class="col-md-8 well">
                <div ui-view="main">
                </div>
            </div>
            <div class="col-md-4 well">
                <div ui-view="thirdrail">
                </div>
            </div>
        </div>
    </div>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script src="Scripts/angular-ui-router.min.js"></script>
 
    <script>
        angular.module("myApp", ["ui.router"]).config(function ($stateProvider, $urlRouterProvider) {
 
            //Every undefined route
            //will be resolved with "/"
            $urlRouterProvider.otherwise("/");
 
            $stateProvider.state("template", {
                views: {
                    "main": {
                        template: "This is the template main"
                            + "<div ui-view='subView1'></div>"
                    },
                    "thirdrail": {
                        template: "This is the template thirdrail"
                            + "<div ui-view='subView2'></div>"
                    }
                }
            }).state("template.home", {
                url: "/",
                views: {
                    "subView1": {
                        template: "This is the home sub-view 1."
                                + "<a ui-sref='template.page1'>Go to page1</a>"
                    },
                    "subView2": {
                        template: "This is the home sub-view 2"
                    }
                }
            }).state("template.page1", {
                url: "/page1",
                views: {
                    "subView1": {
                        template: "This is the page 1 sub-view 1."
                                + "<a ui-sref='template.home'>Go to home</a>"
                    },
                    "subView2": {
                        template: "This is the page 1 sub-view 2"
                    }
                }
            });
        });
    </script>
</body>
</html>

In this example the “template” state defines two views (“subView1” and “subView2”) inside its templates. This means that it can be considered as a template and so we aren’t associating any route to it. Indeed a direct call to that state would be useful because we would not be able to know the content of its views. instead, we associate our routes to its sub states (defined as .) so, for example, when we go to the “/” route we know that we have to use the the “template” state for the “main” and “thirdrail” views of the page and we know that we have to use the “template.home” state for the “subView1” and “subView2” views of the parent state (and without worrying about which particular template of the parent state contains “subView1” and “subView2”).

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