我在设置第一个带有路由的角度应用程序时遇到问题。这很简单，无法正常工作。
单击链接时URL发生更改
index.html-file：/// C：/Users/me/repos/angularRouteTest/app/index.html#！/
关于点击-file：/// C：/Users/me/repos/angularRouteTest/app/index.html#！/＃about
而且ng-view内部的内容不会改变
码：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body data-ng-app="swsApp">
{{1+1}}
<p><a href="#/">Index</a></p>
<a href="#about">About</a>
<div ng-view></div>
</body>
(function() {
"use strict";
var app = angular.module("swsApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("about", {
template : "<h1>About</h1><p>Click on the links to change this content</p>"
})
.otherwise({
template: "<h1>otherwise</h1>"
})
})
}());
知道发生了什么吗？
最佳答案
首先，您不需要任何Web服务器即可启动angularJS应用。
关于链接问题，AngularJS使用hashbang URL：https://docs.angularjs.org/guide/$location#hashbang-mode-default-mode-
Hashbang URL意味着angularJS仅拦截与hashbang＃！的链接！
您只需要为html代码中的每个链接添加此hashbang：
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("/about", {
template : "<h1>About</h1><p>Clicsdfsdfsdfs this content</p>"
})
.otherwise({
template: "<h1>otherwise</h1>"
})
})
</script>
<body data-ng-app="sws">
{{1+1}}
<p><a href="#">Index</a></p>
<a href="#!/about">About</a>
<div ng-view></div>
</body>