Question

我有以下代码，它给了我旧的

无法加载资源：服务器响应状态为404（未找到）

错误，我没有看到我的观点。 main.js文件与项目index.html处于同一级别。

我在Webstorm 10中构建了它，现在我已经盯着并重新安排了两天。我开始睁大眼睛看着它。如果有人能够指出我错过了什么，或者我写错了什么，那将是一个很大的帮助。

编辑：

我编辑了html，因为它缺少ng-view元素。我使用Webstorm内置的localhost服务器进行调试。加载项目时应该看到的第一个模板about.html是无法从项目加载的文件。但就此而言，我在尝试加载每个模板时遇到错误。

编辑2：

我认为它与Webstorm有关。如果我启动一个默认的Angular项目并在浏览器中启动它，我就会收到很多加载资源错误的错误。

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="content/css/custom.css" rel="stylesheet"/>
<base href="/" />
</head>
<body>
<nav class="navbar navbar-fixed-top cstmNavbar">
    <div class="container-fluid">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed"
                data-toggle="collapse" data-target="#navbar-collapse"
                aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="/voiceover">Voice Over</a></li>
            <li><a href="/conventions">Conventions</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/other">Other Links</a></li>
        </ul>
    </div>
</div>
</nav>
<div class="container">
    <div ng-view></div>
</div>
</body>
</html>

main.js

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

app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);

$routeProvider.when('/', {
    templateUrl: '/views/about.html',
    controller: 'aboutCtrl'
})
.when('/voiceover', {
    templateUrl: '/views/voiceover.html',
    controller: 'voiceoverCtrl'
})
.when('/conventions', {
    templateUrl: '/views/conventions.html',
    controller: 'conventionsCtrl'
})
.when('/contact', {
    templateUrl: '/views/contact.html',
    controller: 'contactCtrl'
})
.when('/other', {
    templateUrl: '/views/other.html',
    controller: 'otherCtrl'
})
.otherwise({
    redirectTo: '/'
    });
});
app.controller("mainCtrl", function ($scope) {

});
app.controller("aboutCtrl", function ($scope) {

});
app.controller("voiceoverCtrl", function ($scope) {

});
app.controller("conventionsCtrl", function ($scope) {

});
app.controller("contactCtrl", function ($scope) {

});
app.controller("otherCtrl", function ($scope) {

});

Answer 1

添加你的HTML代码

<ui-view></ui-view>

此标记加载html视图

角度路由设置404错误，可能是操作员错误

1 个答案: