Routing

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    </head>
    <body ng-app="myApp">
        <aside>
            <a href="#red">Red</a>
            <a href="#green">Green</a>
            <a href="#blue">Blue</a>
            <a href="#default">Default</a>
        </aside>
        <section ng-view></section>
    </body>
    <script>
        var app = angular.module("myApp", ["ngRoute"]); // where ngRoute is a dependent module
        app.config(function ($routeProvider) {
            $routeProvider
                    .when("/red", {
                        template: "<h2 style='color:red;'>Red Color</h2>"
                    })
                    .when("/green", {
                        template: "<h2 style='color:green;'>Green Color</h2>"
                    })
                    .when("/blue", {
                        template: "<h2 style='color:blue;'>Blue Color</h2>"
                    })
                    .otherwise({
                        template: "<h2>Default Black Color</h2>"
                    });
        });
    </script>
</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *