如何解决 AngularJs 路由不起作用的问题

Question

如何解决 AngularJs 路由不起作用的问题

Mic*_*thi 1 html javascript angularjs angularjs-routing

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

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

这是代码：

索引.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>

Run Code Online (Sandbox Code Playgroud)

脚本文件

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"
                })});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bas*_*ail 6

问题是用于 $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"
            })
    });

Run Code Online (Sandbox Code Playgroud)

完整的工作示例：

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"
            })
    });

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，11 月前
查看次数：	5350 次
最近记录：	5 年，11 月前