Ошибка маршрутизации 404 AngularJS в режиме HTML5

Я только начал работать с angular js, я попробовал маршрутизацию и работал довольно хорошо. Проблема в том, что когда я обновляю страницу, она показывает ошибку 404, поскольку она проверяет мой фактический каталог, а не проверяет маршруты.

вот полный код

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

  <base href="/" />

  <a href="blue">blue</a>

  <a href="green">green</a> //blue.html and green.html are in same directory as index.html

  <p>Click on the links to load blue or green.</p>

  <div ng-view></div>

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

    app.config(function($routeProvider, $locationProvider) {
      $routeProvider
        .when("/blue/:name?", {
          templateUrl: "blue.html",
          controller: "blue_control"
        })

        .when("/green", {
          templateUrl: "green.html",
          controller: "green_control"
        })

      $locationProvider.html5Mode({
        enabled: true
      });

    });
    app.controller("blue_control", function($scope) {
      $scope.msg = "this is blue";
    });
    app.controller("green_control", function($scope) {
      $scope.msg = "this is green";
    });
  </script>


</body>

</html>

вот вывод браузера

output

это когда я обновляюсь

ошибка

пожалуйста, предоставьте мне какое-нибудь решение.


javascript angularjs http-status-code-404 ngroute angularjs-ng-route
person krishna    schedule 30.05.2017    source источник
comment
это потому, что вам нужно вызывать «localhost/blue», когда вам нужно использовать «localhost/#/blue»   -  person marjes    schedule 31.05.2017
comment
stackoverflow.com/a/44271854/4588990 проверьте, работает ли он нормально, пожалуйста   -  person marjes    schedule 31.05.2017
comment
Возможный дубликат Перезагрузка страницы дает неправильный запрос GET с режимом AngularJS HTML5   -  person georgeawg    schedule 31.05.2017

Ответы (3)


arrow_upward
2
arrow_downward

Режим HTML5 требует перезаписи URL.

Из документов:

Режим HTML5

Сторона сервера

Использование этого режима требует перезаписи URL-адреса на стороне сервера, в основном вам нужно переписать все ваши ссылки на точку входа вашего приложения (например, index.html). Требование тега <base> также важно в этом случае, поскольку оно позволяет AngularJS различать часть URL-адреса, которая является базой приложения, и путь, который должен обрабатываться приложением.

— Руководство разработчика AngularJS — Использование $location (режим HTML5 на стороне сервера)

Для NodeJS и ExpressJS

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

Для IIS в Windows

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

См. Как сделать Я настраиваю IIS для перезаписи URL-адреса приложения AngularJS в режиме HTML5?

Для апача

RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^

См. Как переписать URL-адрес в приложении apache htaccess для angularjs.

За дополнительной информацией

Статья: AngularJS — включить обновление страницы в режиме HTML5 без ошибок 404 в NodeJS и IIS.

person georgeawg    schedule 30.05.2017
comment
Я изменил .htaccess для перенаправления на index.html. теперь работает нормально! - person krishna; 31.05.2017
comment
сделано !???????? RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [ИЛИ] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] RewriteRule ^ /index.html это код, который я использовал в .htaccess - person krishna; 31.05.2017

arrow_upward
1
arrow_downward

У меня была та же проблема с использованием http-сервера, что и мой локальный веб-сервер, это известная проблема с html5, подробно описанная в Часто задаваемые вопросы по angular-ui/ui-router.

Я переключился на Nginx (установить через apt-get) со следующим /etc/nginx/sites-enabled/default

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    #root /var/www/html;

    root /home/conor/workspace/code_institute/route_test;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    #server_name _;
    server_name localhost;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        #try_files $uri $uri/ =404;
        try_files $uri $uri/ /index.html;
    }

 }

Запускать/останавливать/перезагружать после изменений;

sudo service nginx <start|stop|status>

FAQ также охватывает Apache/Express/asp.NET.

person Conor    schedule 24.08.2017

arrow_upward
0
arrow_downward

Проблема в том, что вы не назначаете переменную $routeProvider своему контроллеру, из-за чего контроллер не может получить доступ к переменной $ routeParams.

попробуй это

 /*app.controller("blue_control", function($scope) {

      $scope.msg = "this is blue";
    });
    app.controller("green_control", function($scope) {
      $scope.msg = "this is green";
    });*/
 app.controller("blue_control", function($scope,$routeParams) {
     console.log( $routeParams.term_user);
      $scope.msg = "this is blue";
    });
    app.controller("green_control", function($scope,$routeParams) {
      $scope.msg = "this is green";
    });

ОБНОВЛЕНИЕ

Я думаю, вы не можете использовать версию маршрута с более низкой версией angulajs, например, измените верхнюю версию angularjs

/* <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>*/

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


<!DOCTYPE html>
<html>


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

<body ng-app="app">

  <base href="/#/" />

  <a href="#/blue">blue</a>

  <a href="#/green">green</a> //blue.html and green.html are in same directory as index.html

  <p>Click on the links to load blue or green.</p>

  <div ng-view></div>

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

    app.config(function($routeProvider) {
      $routeProvider
        .when("/blue/:name?", {
          templateUrl: "blue.html",
          controller: "blue_control"
        })

        .when("/green", {
          templateUrl: "green.html",
          controller: "green_control"
        })

      

    });
    app.controller("blue_control", ['MyFirstController',function($scope, $routeParams) {
      $scope.msg = "this is blue";
    }]);
    app.controller("green_control", ['MyFirstController2',function($scope, $routeParams) {
      $scope.msg = "this is green";
    }]);
  </script>


</body>

</html>

person marjes    schedule 30.05.2017