AngularJS Router app冻结网页

时间:2018-04-18 14:37:48

标签: javascript angularjs angular-ui-router

首先,我能够通过更新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.

1 个答案:

答案 0 :(得分:0)

尝试像这样配置$locationProvider

app.config(function($locationProvider) {

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

MyLink 哪个给:http://blablabla.co:8888/blabla#/mylink/

希望得到这个帮助。