AngularJS - Routing - "ng-route" - Removing # symbol from url

This is the continuation of the previous post.
To remove the # from partial view urls you need to do following 4 steps:

• Enable html5moderouting.
• Remove #/ symbols from all the links.
• Include URL rewrite rule in web.config

         <system.webServer>

                <rewrite>

                    <rules>

                        <rule name="RewriteRules" stopProcessing="true">

                             <!-- write the rules here -->

                        </rule>

                    </rules>

                </rewrite>

         <system.webServer>         

• Set base base href element to the location of your single page application. This says that the location of the main view where the partial views will be injected is present int the location specified in base href value.

Define Routes:

var myApp = angular.module('myApp', ["ngRoute"])

                                     .config( function ($routeProvider, $locationProvider){

                                          $routeProvider
                                                .when("/home",  {
                                                        templateUrl: "Partial/home.html",
                                                        controller: "homeController"
                                                })
                                                .when("/cources",  {
                                                        templateUrl: "Partial/courses.html",
                                                        controller: "coursesController"
                                                })                                                
                                                .when("/departments",  {
                                                        templateUrl: "Partial/departments.html",
                                                        controller: "departmentsController"
                                                })    

                                                .otherwise({
                                                       redirectTo: "/home"
                                                })      
                                           $locationProvider.html5Mode(true);                                   

                                        });

Define Controllers:

var myApp = angular.module('myApp', ["ngRoute"])

                                     .controllers("homeController",  function ($scope){

                                          $scope.message = "Home";
                                     })   

                                     .controllers("coursesController",  function ($scope){

                                           $http({
                                                         method: "get",
                                                         url: "CoursesService.asmx/GellAllCourses"
                                           })
                                               .then(
                                                function(response) {
                                                      $scope.departments = response.data;
                                                 }, 
                                                 function(reason) {
                                                      $scope.error = reason.data;
                                                 });                                          
                                     })                                             

                                     .controllers("departmentController",  function ($scope, $http){
                                           $http({
                                                         method: "get",
                                                         url: "DepartmentService.asmx/GellAllDepartment"
                                           })
                                               .then(
                                                function(response) {
                                                      $scope.departments = response.data;
                                                 }, 
                                                 function(reason) {
                                                      $scope.error = reason.data;
                                                 });

                                     });                                   

Index.html:

<head>

    <base href ="/" />   <!-- In current case it says that the location of the main view where the partial views will be injected is present in root directory of our application-->

</head>

<body>

    <div>

        <a href="home"> Home </a>

        <a href="courses"> Courses</a>

        <a href="departments"> Departments</a>  

    <div>

    <div class="container">

        <ng-view>

            <!-- Here partial templates will be injected home.html, courses.html, departments.html -->

        </ng-view>

    </div> 

</body>