我如何解决AngularJs - 路由不起作用[重复]答案

【问题标题】：How do I solve AngularJs -routing not working [duplicate]我如何解决AngularJs - 路由不起作用[重复]
【发布时间】：2020-04-23 08:43:30
【问题描述】：

我正在编写一些简单的代码来练习角度路由。我有一个 index.html 文件，其中包含访问各个模板的链接和一个 div 元素来显示模板。但是，当单击链接并且 url 未按预期显示时，模板不会显示。

url 显示为： http://localhost/angproj/#!#%2Fhome 而不是预期的http://localhost/angproj#/home

代码如下：

Index.html

<!DOCTYPE html>
<html ng-app = "myModule">
<head>
    <title>Home</title>
    <link rel="stylesheet" href ="styles.css">
    <script src="angular/angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="script.js"></script>
    <meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
    <header><h2>Website Header</h2></header>
        <div class="column">
            <div class="links">
            <a href="#/home">Home</a><br>
            <a href="#/services">Our services</a><br>
            <a href="#/technologies">Technologies</a><br>
        </div>
        </div>
        <div class="content" ng-view></div>
    <footer><h3>Website footer</h3></footer>
</body>
</html>

脚本文件

var myApp = angular
            .module("myModule",["ngRoute"])
            .config(function($routeProvider){
                $routeProvider
                .when("/home",{
                    template:"About Us"
                })
                .when("/services",{
                    template:"Our Services"
                })
                .when("/technologies",{
                  template:"Our Technologies"
                })});

【问题讨论】：

标签： javascript html angularjs angularjs-routing

【解决方案1】：

问题是用于 $location hash-bang URL 的默认哈希前缀是 ('!')，这就是为什么您的 URL 中有额外的不需要的字符。

如果您确实希望没有哈希前缀并使您的示例正常工作，那么您可以通过向您的应用程序添加配置块来删除默认哈希前缀（“！”字符）。

所以您的脚本文件将是：

var myApp = angular
    .module("myModule", ["ngRoute"])
    .config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
        $locationProvider.hashPrefix(''); // add configuration
        $routeProvider
            .when("/home", {
                template: "About Us"
            })
            .when("/services", {
                template: "Our Services"
            })
            .when("/technologies", {
                template: "Our Technologies"
            })
    });

完整的工作示例：

var myApp = angular
    .module("myModule", ["ngRoute"])
    .config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
        $locationProvider.hashPrefix(''); // add configuration
        $routeProvider
            .when("/home", {
                template: "About Us"
            })
            .when("/services", {
                template: "Our Services"
            })
            .when("/technologies", {
                template: "Our Technologies"
            })
    });

<!DOCTYPE html>
<html ng-app = "myModule">
<head>
    <title>Home</title>
    <link rel="stylesheet" href ="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-route.min.js"></script>
    <meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
    <header><h2>Website Header</h2></header>
        <div class="column">
            <div class="links">
            <a href="#/home">Home</a><br>
            <a href="#/services">Our services</a><br>
            <a href="#/technologies">Technologies</a><br>
        </div>
        </div>
        <div class="content" ng-view></div>
    <footer><h3>Website footer</h3></footer>
</body>
</html>

【讨论】：

您好，巴塞尔，感谢您的回答。我试过了，但它在控制台返回一个错误，即有一个模块错误。模板仍然无法加载。
@MykeMurithi，你能粘贴控制台错误以便我检查吗？
是的。这是控制台返回的错误引用：code.angularjs.org/1.7.9/docs/error/$injector/modulerr
查看我添加到答案中的完整示例“sn-p”，尝试使用它，然后在其上添加您自己的修改。
谢谢。让我试试看。我会给你反馈。