为了账号安全,请及时绑定邮箱和手机立即绑定

HTML5模式下的AngularJS路由404错误

/ 猿问

HTML5模式下的AngularJS路由404错误

FFIVE 2019-09-27 15:56:36

我刚开始使用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>



查看完整描述

3 回答

?
慕雪6173905

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;

对于Windows上的IIS

<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以在HTML5模式下用URL重写AngularJS应用程序?


对于阿帕奇

RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

RewriteRule ^ - [L]

RewriteRule ^


查看完整回答
反对 回复 2019-09-27
?
慕莱坞5435954

我在使用http-server和本地web服务器时遇到了相同的问题,这是html5的一个已知问题,并在angular-ui / ui-router FAQ中进行了详细介绍。


我使用以下命令切换到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>

该常见问题解答还涵盖了Apache / Express / asp.NET


查看完整回答
反对 回复 2019-09-27
?
侃侃无极

问题是您没有将变量$ 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";

    });

UPDATE


我认为您不能使用带有较低版本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>


查看完整回答
反对 回复 2019-09-27

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信