Search code examples
angularjsangularjs-routing

AngularJs: Deep linking Default Index.Html is not opening

I am developing the angular app, when i hit the browser with the url: http://localhost/angular/MyAngularRewind/ , the index.html is not opening but actually it should have opened the index.html.

C:\wamp\www\Angular\MyAngularRewind ---> this is the path where i am having the index.html, see screenshot below

but page is opening when i hit with this url: http://localhost/angular/MyAngularRewind/index.html and it changes to http://localhost/angular/MyAngularRewind/index.html#/

ideally below thing should have happened: when i hit the url:http://localhost/angular/MyAngularRewind/ it should open the page with the url automatically changes to http://localhost/angular/MyAngularRewind/index.html/#/, but it is not happening i got no clue, why this happens.

see the screenshot for file structure. ss

Index.html

<html lang="en" ng-app="myApp">
        <head>
            <meta charset="utf-8">
            <title>My HTML File</title>
            <title>Google Phone Gallery</title>
            <link rel="stylesheet" href="css/app.css">
            <link rel="stylesheet" href="css/bootstrap.css">
            <script src="lib/angular/angular.js"></script>
            <script src="js/controllers.js"></script>
            <script src="js/routes.js"></script>

        </head>
        <body ng-controller="appCtrl">
            <div class="" ng-view></div>
        </body>
    </html>

Javascript:

angular.module('myApp', []).
        config(['$routeProvider', function($routeProvider) {
          $routeProvider.
                        when('/', 
                            {
                            templateUrl: 'partials/partial-For-routes-1.html', 
                            controller: appCtrl
                            }).
                        when('/page-2', 
                            {
                            templateUrl: 'partials/partial-For-routes-2.html', 
                            controller: appCtrl
                            }).
                        when('/page-3', 
                            {
                            templateUrl: 'partials/partial-For-routes-3.html', 
                            controller: appCtrl
                            }).
                        otherwise({redirectTo:("/")})
         }]);

Thanks in advance for any help.

Solution

  • The problem is probably with your server and not Angularjs - You need to instruct the server to automatically serve index.html when you access a directory (/angular/MyAngularRewind/.

    Having said that I'm not sure which server your using, so I can't offer a solution