我如何解决 AngularJs - 路由不工作

Question

我正在编写一些简单的代码来练习 angular 中的路由。我有一个 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"
                })});

Answer 1

问题是用于 $location hash-bang URLs 的默认哈希前缀是 ('!') 这就是为什么在您的 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>

我如何解决 AngularJs - 路由不工作

How do I solve AngularJs -routing not working

javascript

html

angularjs

angularjs-routing