Question

我构建了一个角色（1）应用程序，在前面工作得很好。我尝试添加一些backend功能，这里的麻烦就开始了。我知道一些php并希望使用xampp（5.6.19）为Windows运行应用程序。我将项目移动到localhost文件夹，安装了xampp和`php'（7.0.13）。我知道这个设置有效，因为我的其他应用程序运行正常，除了新的，无法理解什么是错的。层次结构如下：

htdocs/myApp/index.html

我试图通过浏览localhost/myApp来运行它，然后我在控制台中收到很多错误：

GET http://localhost/styles/style.css net::ERR_ABORTED
localhost/:22 GET http://localhost/templates/chatRoom/chatRoomController.js net::ERR_ABORTED
localhost/:28 GET http://localhost/js/directives/onEnter.js net::ERR_ABORTED
localhost/:25 GET http://localhost/js/services/chatService.js net::ERR_ABORTED
localhost/:27 GET http://localhost/js/directives/msg.js net::ERR_ABORTED
localhost/:23 GET http://localhost/templates/login/loginController.js net::ERR_ABORTED
localhost/:22 GET http://localhost/templates/chatRoom/chatRoomController.js net::ERR_ABORTED
localhost/:23 GET http://localhost/templates/login/loginController.js net::ERR_ABORTED
localhost/:25 GET http://localhost/js/services/chatService.js net::ERR_ABORTED
localhost/:27 GET http://localhost/js/directives/msg.js net::ERR_ABORTED
localhost/:28 GET http://localhost/js/directives/onEnter.js 404 (Not Found)
angular.js:11630 GET http://localhost/templates/login/login.html 404 (Not Found)
(anonymous) @ angular.js:11630
sendReq @ angular.js:11423
serverRequest @ angular.js:11133
processQueue @ angular.js:15757
(anonymous) @ angular.js:15773
$eval @ angular.js:17025
$digest @ angular.js:16841
$apply @ angular.js:17133
bootstrapApply @ angular.js:1713
invoke @ angular.js:4625
doBootstrap @ angular.js:1711
bootstrap @ angular.js:1731
angularInit @ angular.js:1616
(anonymous) @ angular.js:30709
trigger @ angular.js:3127
defaultHandlerWrapper @ angular.js:3417
eventHandler @ angular.js:3405
angular.js:13424 Error: [$compile:tpload] Failed to load template: ../templates/login/login.html (HTTP status: 404 Not Found)

我的index.html文件如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/styles/style.css">
</head>
<body ng-app="app" ng-controller="mainCtrl">
    <ui-view></ui-view>
</body>
<!-- angular scripts -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="node_modules/@uirouter/angularjs/release/angular-ui-router.js"></script>
<!-- controllers -->
<script src="app.js"></script>
<script src="/templates/chatRoom/chatRoomController.js"></script>
<script src="/templates/login/loginController.js"></script>
<!-- services -->
<script src="/js/services/chatService.js"></script>
<!-- directives -->
<script src="/js/directives/msg.js"></script>
<script src="/js/directives/onEnter.js"></script>
</html>

app.js：

var app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    var loginState = {
        name: 'login',
        url: '/login',
        templateUrl: '../templates/login/login.html',
        controller: "loginController"
    }

    var chatRoomState = {
        name: 'chatRoom',
        url: '/chatRoom',
        templateUrl: '../templates/chatRoom/chatRoom.html',
        controller: "chatRoomController"
    }

    $stateProvider.state(loginState);
    $stateProvider.state(chatRoomState);
    $urlRouterProvider.otherwise('login');
}).controller("mainCtrl", function($scope) {

}).run([
    "$state",
    function($state) {
        $state.go('login');
    }
]);

为什么找不到这些文件？

Answer 1

从参考文件js和css中删除尾部斜杠，因为您看到它们指向

http://localhost/js/

而不是

http://localhost/myApp/js/

将头部改为以下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app="app" ng-controller="mainCtrl">
    <ui-view></ui-view>
</body>
<!-- angular scripts -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="node_modules/@uirouter/angularjs/release/angular-ui-router.js"></script>
<!-- controllers -->
<script src="app.js"></script>
<script src="templates/chatRoom/chatRoomController.js"></script>
<script src="templates/login/loginController.js"></script>
<!-- services -->
<script src="js/services/chatService.js"></script>
<!-- directives -->
<script src="js/directives/msg.js"></script>
<script src="js/directives/onEnter.js"></script>

Angular 1.x - 无法使用xampp从localhost运行

1 个答案: