Routing without hashtag

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <base href="/">
        <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="testlab/angular/sample/26_routing_without_hashing.html">Home</a>
            <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"]);
        app.config(function ($routeProvider, $locationProvider) {
            $routeProvider
                    .when("/red", {
                        template: "<h2 style='color:red;'>Red Color</h2>"
                                /*
                                 templateUrl : "red.html",
                                 controller : "myCtrl"
                                 */
                    })
                    .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>"
                    });

            $locationProvider.html5Mode(true);
        });
    </script>
</html>
Leave a Reply Cancel reply
