Routing-in-AngularJS.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS Routes example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleApp">
<div style="float:left;"><h2>AngularJS Routes Example</h2></div>
<div style="float:right;"><img src="../images/infosys.gif" alt="Infosys" title="Infosys" style="width:420px;" /></div>
<div style="clear:both;"></div>

<hr />

<a href="#/route1/abcd">Route 1 + param</a><br/>
<a href="#/route2/1234">Route 2 + param</a><br/><br/><br/>
<div ng-view></div>
<script>
    var module = angular.module("sampleApp", ['ngRoute']);
    module.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                    when('/route1/:param', {
                        template: '<h1>You Clicked the First Link</h1>',
                        controller: 'RouteController'
                    }).
                    when('/route2/:param', {
                        template: '<h1>You Clicked the Second Link</h1>',
                        controller: 'RouteController'
                    }).
                    otherwise({
                        redirectTo: '/'
                    });
        }]);
    module.controller("RouteController", function($scope, $routeParams) {
        $scope.param = $routeParams.param;
    })
</script>
</body>
</html>