AngularJS loads only the component html instead of entire ng-view

Question

I created routes, and one route which can hold the params and upon them call the specific html in ng-view.

<div id="navPost" class="row">
            <div  class="col-sm-8">
                <div class="levakolona">
                    <main ng-view></main>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="desnakolona">----
                    // something
                </div>
            </div>
        </div>

And here are the routes...

app.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when("/", 
{
    title: 'Glavna',
    templateUrl : "/pages/kartice.html",
    controller: 'kontroler'
})
.when("/glavna", 
{
    title: 'Glavna',
    templateUrl : "/pages/kartice.html",
    controller: 'kontroler'
})
.when("/post/:postID", 
{
    title: 'Post',
    templateUrl: '/pages/post.html',
    controller: 'kontroler'
})
.when("/o-nama", 
{
    title: 'Post',
    templateUrl: '/pages/Onama.html',
    controller: 'kontroler'
})
.otherwise({
    redirectTo: '/'
 });

}]);

app.controller('kontroler', ['$scope', '$routeParams', function($scope, $routeParams){
    $scope.templateUrl = '/pages/postovi/'+$routeParams.postID + '.html';
}]);

When i route with /post/VaricellaZoster.html it opens me that specific html in post.html and calls back to ng-view...but when i type that url directly in Chrome or whatever browser then it opens me just that html and doesn't generate entire app with ng-view...and how can it can be fixed?

Answer 1

Add in your htaccess:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

This will skip to the actual resource if there is one, and to index.html for all AngularJS routes.