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内容和导航链接。网址为http://127.0.0.1:8080/#!/。当我点击例如项目，网址变为http://127.0.0.1:8080/#!/#%2Fprojects，但网页内容仍然相同（导航链接+ main.html的内容）。

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

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

......但结果是一样的。

我做错了什么？

Answer 1

它看起来工作正常。并且在评论中提到需要检查角度版本。我创建了一个样本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>

角度路由不起作用

1 个答案: