Question

我是角度js中的新手我需要通过以下代码进行路由，但它会收到HTTP状态404错误

网络控制台显示此消息

localhost：8080 / testasd / addStudent无法加载资源：服务器响应状态为404（未找到）

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

  mainApp.config(['$routeProvider',
     function($routeProvider) {
        $routeProvider.
           when('/addStudent', {
              templateUrl: 'AddStudent.html',
              controller: 'AddStudentController'
           }).
           when('/viewStudents', {
              templateUrl: 'ViewStudents.html',
              controller: 'ViewStudentsController'
           }).
           otherwise({
              redirectTo: '/addStudent'
           });
     }]);

     mainApp.controller('AddStudentController', function($scope) {
        $scope.message = "This page will be used to display add student form";
     });

     mainApp.controller('ViewStudentsController', function($scope) {
        $scope.message = "This page will be used to display all the students";
     });

Answer 1

您需要配置您的网络服务器，以便为所有请求的网址发送index.html。这称为重写规则。这是因为Web浏览器将为该URL发出GET请求，Web服务器希望在该位置找到文件。重写规则允许您拦截该请求并将其重定向到其他文件。

路由中的URL在Web服务器上不存在，但需要加载AngularJS。因此，从Web根目录发送index.html以获取所有请求。这假设您正在创建所谓的单页应用程序。

对于Apache，在您的Web根目录中创建一个名为.htaccess的文件

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.html [QSA,L]
 </IfModule>

对于IIS，在Web根目录中创建名为web.config的文件

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <clear />
            <rule name="angular" patternSyntax="Wildcard">
                <match url="*" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="index.html" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>

如何通过angularjs路由

1 个答案: