Why when I reload the page does the 404 come out in angularjs?

Question

Why when I reload the page does the 404 come out in angularjs?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm new to AngularJS and I'm learning how to do routing. I managed to correctly run the routing of several views on the same page without having to reload the main page, all right up there.

My problem is already presented when I see that the URL has some symbols (these are exactly #!) when navigating between the different pages in the following way:

http://localhost:8080/Proyectos/AngularJS/Routing/#!/Vista1

I found that to remove them I should use the $locationProvider.html5Mode(true) function and the base html tag in order to remove those symbols from the URL and make it cleaner, I did it and it worked.

The problem is that if I try to reload the page I'm on, like for example this http://localhost:8080/Proyectos/AngularJS/Routing/Vista1 tells me

"Object not found Error 404"

If I overcharge the root, that is to say: http://localhost:8080/Proyectos/AngularJS/Routing/ if it works normal.

I would like to know, why is this? And what can I do so that I can reload the page no matter what page I am on?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <base href="/ProyectosCristian/AngularJS/Routing/">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="components/angular-route.js"></script>

    <title>Routing</title>
</head>
<body>
    <div class="cont" ng-app="app">
        <div class="menu">
            <menu></menu>
        </div>
        <div class="views" ng-view></div>
        <div ng-controller="control"></div>
    </div>

    <script>
        var app = angular.module('app', ['ngRoute']);

        app.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {

            $routeProvider
            .when('/', {
                templateUrl: 'components/home.html'
            })  
            .when('/home', {
                templateUrl: 'components/home.html'
            })      
            .when('/seccion1', {
                templateUrl: 'components/seccion1.html'
            })
            .when('/seccion2',{
                templateUrl: 'components/seccion2.html'
            })
            .otherwise({
                redirectTo: '/'
            });         
            $locationProvider.html5Mode({
                enabled: true,
                requireBase: true
            }).hashPrefix(['!']);
        }]);

        app.directive('menu', function(){
            return{
                restrict: 'E',
                templateUrl: 'components/menu.html'
            }
        });

    </script>
</body>
</html>

angularjs

asked by Cristian Tabares 06.04.2018 в 22:58

source

2 answers

upload image to laravel ajax psql trigger for update in single table field

score 0 · Answer 1

Ok, try this code, instead of <base href="/ProyectosCristian/AngularJS/Routing/">
write <script>document.write('<base href="' + document.location + '" />');</script>

    <!DOCTYPE html>
        <html ng-app="app" ng-strict-di>
        <head>             
            <script>document.write('<base href="' + document.location + '" />');</script>
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">   
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
            <script src="components/angular-route.js"></script>

            <title>Routing</title>
       </head>

score 0 · Answer 2

I have it working

Simply adding a .htaccess file to the root

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>