AngularJS路由器应用程序冻结网页

Question

首先，我能够通过更新 CDN 链接来修复空白页面。它能够加载 header.html 和 footer.html 而没有任何错误消息，但在尝试显示视图页面时它会冻结。我不确定它是否与app.js 或CDN https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js 链接有关？

没有 JS 控制台错误。

app.js

var myApp= angular.module("myApp", ["ngRoute"]);

myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
    .when('/', {
    templateUrl: 'index.html'
})
    .when('/about', {
    templateUrl: 'views/about.html'
})
    .when('/contact', {
    templateUrl: 'views/contact.html'
})
    .when('/business', {
    templateUrl: 'views/business-interpreting.html'
})
    .when('/deafconsumers', {
    templateUrl: 'views/deaf-consumers.html'
})
    .when('/educational', {
    templateUrl: 'views/educational-interpreting.html'
})
    .when('/recruitment', {
    templateUrl: 'views/interpreter-recruitment.html'
})
    .when('/legal', {
    templateUrl: 'views/legal-interpreting.html'
})
    .when('/medical', {
    templateUrl: 'views/medical-interpreting.html'
})
    .when('/newclient', {
    templateUrl: 'views/new-client.html'
})
    .when('/request', {
    templateUrl: 'views/request-interpreter.html'
})
    .when('/vri', {
    templateUrl: 'views/video-remote-interpreting.html'
});
});

链接

<div class="nav">
    <ul>
        <li><a href="#!request">REQUEST AN INTERPRETER</a></li>
        <li><a href="#!newclient" class="arrow">HEARING/NEW INFO</a>
            <span>
            <a href="#!medical">MEDICAL INTERPRETING</a>
            <a href="#!legal">LEGAL INTERPRETING</a>
            <a href="#!business">BUSINESS INTERPRETING</a>
            <a href="#!educational">EDUCATIONAL INTERPRETING</a>
            <a href="#!vri">VRI</a>
            </span>
        </li>
        <li><a href="#!consumers">DEAF CONSUMERS</a></li>
        <li><a href="#!recruitment">INTERPRETER RECRUITMENT</a></li>
        <li><a href="#!about">ABOUT</a></li>
    </ul>
</div>

模块

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

HTML

<!-- Header section -->
<div ng-include="'views/header.html'"></div> <--- loads just fine, but froze.

<!-- Views section -->
<div ng-view></div>  <---------- it froze the webpage

<!-- Footer section -->
<div ng-include="'views/footer.html'"></div> <--- loads just fine, but froze.

Answer 1

尝试像这样配置$locationProvider：

app.config(function($locationProvider) {

    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode({
    enabled: false,
    requireBase: true
  });
});

我的链接 哪个给：http://blablabla.co:8888/blabla#/mylink/

希望对您有所帮助。