Angular JS – States (SPA Routing)

States are the Angular mechanism to handle SPA routing. Instead of using the default routing provided by Angular there is an extension named ui-router that is far better. It can be downloaded from NuGet.

Once downloaded the extension we can configure the routing within the config() method of our application module. We can define a set of status with, for each one, a deep link URL and a template (as for the custom directives we can use the templateUrl property to refer a template located in an external html file).

<!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-12 well">
                <div ui-view="">
                </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("root", {
                url: "/",
                template: "This is the home page. <a ui-sref='page1'>Go to page1</a>"
            }).state("page1", {
                url: "/page1",
                template: "This is the page 1. <a ui-sref='root'>Go to home</a>"
            });
        });
    </script>
</body>
</html>

The template is loaded inside the DIV with the ui-view property, whose acts as placeholder. In this case I created 2 states related to the route “/” and the route “/page1”. Within a template I can let ui-router to generate the deep links to refer the other states. This can be done using the ui-sref property, with the logic name of the target state.


Using multiple views

I can have multiple views related to the same route. This can be useful if I have a generic layout, for example a main column and a third rail column, but I just want to concentrate only on the contents.

In these cases I can define a view for the main column’s content and another view for the third rail’s content. Then I can assign a template (or a templateUrl) to each view, based on the current route. To do this I have to use the views property instead of the template property (or templateUrl). Whithin the views property I can then define the template (or templateUrl) related to each view I want to manage in my page.

<!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("root", {
                url: "/",
                views: {
                    "main": { template: "This is the home page. <a ui-sref='page1'>Go to page1</a>" },
                    "thirdrail": { template: "This is the home page thirdrail" }
                }
            }).state("page1", {
                url: "/page1",
                views: {
                    "main": { template: "This is the page 1. <a ui-sref='root'>Go to home</a>" },
                    "thirdrail": { template: "This is the page 1 thirdrail" }
                }
            });
        });
    </script>
</body>
</html>
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