Angular 路由不起作用

Question

免责声明：是的，我已经阅读了许多其他帖子，但未能找到解决方案。

所以，我已经设置了一个基本的 Angular 应用程序：

index.html

<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="js/angular.js"></script>
        <script src="js/angular-route.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div class="navbar">
            <a href="#/">Home</a>
            <a href="#/aboutme">About me</a>
            <a href="#/projects">Projects</a>
            <a href="#/contact">Contact</a>
        </div>
        <div ng-view></div>
    </body>
</html>

app.js

var myApp = angular.module('sampleApp', ['ngRoute']);    
myApp.config(
    function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'views/main.html'
        }).
        when('/aboutme', {
            templateUrl: 'views/aboutme.html'
        }).
        when('/projects', {
            templateUrl: 'views/projects.html'
        }).
        when('/contact', {
            templateUrl: 'views/contact.html'
        }).
        otherwise({
            redirectTo: '/'
        });
    }
);

当我启动服务器（npm install http-server 后跟 http-server -o）和运行应用程序时，我可以看到 main.html 内容和导航链接。 URL 是 http://127.0.0.1:8080/#!/。当我点击例如项目，URL变成了http://127.0.0.1:8080/#!/#%2Fprojects，但页面内容还是一样（导航链接+main.html的内容）。

我也试过这样修改app.js：

...
myApp.config(['$routeProvider',
    function($routeProvider) {
    ...
}]);

...但是结果是一样的

我做错了什么？

Answer 1

它似乎工作正常。正如评论中提到的那样，需要检查 angular 版本。我创建了一个示例 Plunker

<script data-require="angular.js@1.5.10" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script data-require="angular-router@1.2.0-rc1" data-semver="1.2.0-rc1" src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>

Angular 路由不起作用

Angular routing doesn't work

angularjs

angular-routing