Question

＆＃13;

var app = angular.module("myApp", ["ngRoute","ui.router"]);
app.config(function($routeProvider,$urlRouterProvider,$locationProvider,$provide, $stateProvider) {

  $routeProvider
  .when("/", {
      templateUrl : "templates/main.htm"
  })
  .when("/london", {
      templateUrl : "templates/london.htm",
      controller:"ctrl"
  })
  .when("/paris", {
      templateUrl : "templates/paris.htm"
  });

$locationProvider.html5Mode(true);


});

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Bootstrap Example</title>
  <base href="/simpleAnjularjs/" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body ng-app="myApp">

<!-- routeProvider -->
 <a href="london">Red</a>
<a href="paris">Green</a>
<div ng-view></div>

<!-- stateProvider -->
<!-- <a ui-sref="red">Red</a>
<a ui-sref="green">Green</a>
<div ui-view></div> -->


<!-- <script src="js/angular.min.js"></script> -->
<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.6.4/angular-route.js"></script> -->
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/Angularjs_ui_routing.js"></script>

<script src="app.js"></script>
</body>
</html>

＆＃13;

其他模板（london.html，paris.html，main.html）使用的是具有默认

标记的普通html页面，当我重新加载我获得的任何页面时错误说＆＃34;在此服务器上找不到请求的URL / simpleAnjularjs / paris＆＃34;

Answer 1

如何：配置服务器以使用html5Mode

启用html5Mode后，您的网址中将不再使用＃字符。＃符号很有用，因为它不需要服务器端配置。没有＃，url看起来更好，但它也需要服务器端重写。

Apache重写

<VirtualHost *:80>
ServerName my-app

DocumentRoot /path/to/app

<Directory /path/to/app>
    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]
</Directory>
</VirtualHost>

Azure IIS重写

<system.webServer>
<rewrite>
<rules> 
  <rule name="Main Rule" 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>

在Url中删除＃后重新加载时找不到页面错误

1 个答案: