angular route deep linking using ngRoute in apache

Question

i have an angular js app and i am using it in a conventional html page have included angular route also

           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
                <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>

and in my module

 var nameApp = angular.module('mainApp', ['ngRoute']); 

           mainApp.config(['$routeProvider','$locationProvider',function($routeProvider, $locationProvider) {
            console.log('config ');  
            $routeProvider

              .when('boxAuth', {
                  templateUrl: 'boxReturn.html',
                  controller: 'authController'
              });

              // configure html5 to get links working on jsfiddle
              $locationProvider.html5Mode(true);
            }])

        ;

now if i try to access the url http://localhost:8082/boxAuth it gives 404 error

how can i deeplink to this url using angular

Have you tried `.when('/boxAuth',` ? note backslash – StudioTime Mar 10 '15 at 09:25 — StudioTime, Mar 10 '15 at 09:25

score 1 · Accepted Answer · answered Mar 10 '15 at 09:54

1

You need to configure your server to return the index page regardless of the route so your angular application loads

if you cannot do that consider using hash(#) routing

answered Mar 10 '15 at 09:54

kruczy

791
4
8

Michal Kucaj · Answer 2 · 2015-03-10T09:55:06.630

Hi i think you forget to add <base href="/" /> to your index.html

<!doctype html>
<html lang="en" ng-app="mainApp">
    <head>
        <meta charset="UTF-8">
        <title>Angular Demo</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <base href="/" />
    </head>
    <body>
        <div ng-view>
        </div>
        <!-- Scripts -->
        <script src="lib/angular/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllersTest.js"></script>
    </body>
</html>

app.js

var mainApp = angular.module('mainApp', ['ngRoute']);

mainApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/boxAuth', {
                templateUrl: 'partials/boxReturn.html',
                controller: 'authController'
            })
            .otherwise({
                redirectTo: '/boxAuth'
            });
        $locationProvider.html5Mode(true);
    }
]);

And finally you nedd to add .htaccess file inside your root folder and paste this

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

score 0 · Answer 3 · answered Mar 10 '15 at 09:46

I created a similar app, and this code is working for me. Hope it helps you!

var module = angular.module('MyApp', ['ngRoute']);

            module.config(['$routeProvider', function($routeProvider){
                $routeProvider.
                when('/abc', {
                    templateUrl: 'abc.jsp',
                    controller: 'MyController'
                }).
                when('/xyz.jsp', {
                    templeateUrl: '/Test1/xyz.jsp',
                    controller: 'LoginController'
                }).
                otherwise({
                    redirectTo: ''
                });
            }]);

Also the html looks something like this:

Home

abc

xyz

– Abhishek Sehrawat Mar 10 '15 at 09:53 — Abhishek Sehrawat, Mar 10 '15 at 09:53

angular route deep linking using ngRoute in apache

3 Answers3