繁体   English   中英

没有模板的ExpressJS + AngularJS单页找不到页面(404)

[英]ExpressJS + AngularJS single page without template not found page (404)

我的应用程序未在index.thml内的ng-view中加载模板。 我在这里放了我的代码,因为我迷路了。

app.js

    var express = require('express');
    var app =  express();
    var path = require('path');
    var bodyParser = require('body-parser');

    // var $ = require('jquery');
    // global.jQuery = $;
    // var bootstrap = require('bootstrap');
    app.use(express.static(path.join(__dirname, 'public')));

    app.set('views', __dirname + 'views');
    app.set('view engine', 'html');

    var routes = require('./routes');

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
        extended: true
    }));

    app.get('/', function(req, res) {
      res.sendFile(__dirname + "/public/views/index.html"); 
    });

    app.set('port', process.env.PORT || 3000);

    var server = app.listen(app.get('port'), function() {
        console.log('Started Success http://localhost:' + server.address().port);
    });

和角线

angular.module('geradorContrato', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {

$locationProvider.html5Mode(true);

$routeProvider

.when('/contrato', {
    templateUrl: '/public/views/contrato.html',
    controller: 'ContratoController'
})

.when('/contratante', {
    templateUrl: '/public/views/contratante.html',
    controller: 'ContratanteController'
})

.when('/contratada', {
    templateUrl: '/public/views/contratada.html',
    controller: 'ContratadaController'
})

.when('/bemvindo', {
    templateUrl: 'public/views/bemVindo.html',
});

});

但是当我访问http:// localhost:3000 /#/ bemvindo页面index.html加载成功,但是ngview无法加载并显示消息无法将/public/views/bemVindo.html放入控制台网络镶边时

以下是我的index.html

    <!DOCTYPE html>
<html ng-app="geradorContrato">
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <link rel='stylesheet' href='/stylesheets/dist/css/bootstrap-theme.css'>
        <link rel='stylesheet' href='/stylesheets/dist/css/bootstrap.css'>
        <link rel="stylesheet" type="text/css" href="/stylesheets/mainStyle.css">

        <script src="/javascript/lib/angular.js"></script>
        <script src="/javascript/lib/angular-route.js"></script>
        <script src="/javascript/lib/jquery.js"></script>
        <script src="/javascript/lib/bootstrap.js"></script>
         <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
        <script src="/javascript/main.js"></script>
        <script src="/javascript/ContratoController.js"></script>

        <title>Cadastro</title>
    <head>
    <body>
        <div class="container">
            <ng-view></ng-view>
        </div>
    </body>
    </html>

以下是我的页面简单的bemVindo.html

OLÁSEJA VEM VINDO!

这是我的应用程序的基本结构

结构体

抱歉,如果您听不懂,请告诉我

对不起我的英语不好

意见建议

迪克

var express = require('express');
var app =  express();
var path = require('path');
var bodyParser = require('body-parser');

app.use(express.static(path.join(__dirname, 'public')));

var routes = require('./routes');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

app.use('/', express.static(path.join(__dirname, '/public/views/index.html')));

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
    console.log('Started Success http://localhost:' + server.address().port);
});

错误无法获取/

您提供的路径必须错误,请检查文件所在的路径,尝试在javascript控制台中控制台该路径并提供正确的路径。 “无法获取/public/views/bemVindo.html”表示文件bemVindo.html不在文件夹/ p​​ublic / views中。 无法找到该文件,因此显示此错误。

摆脱 :

app.set('views', __dirname + 'views');
app.set('view engine', 'html');

不需要.... view引擎html是默认的。 不使用Views文件夹。

编辑:也删除此:

app.use(express.static(path.join(__dirname, 'public')));

更改此:

app.get('/', function(req, res) {
  res.sendFile(__dirname + "/public/views/index.html"); 
});

对此:

app.use('/', express.static(path.join(__dirname, '/public/views/index.html')));

让我们知道这是html和支持文件所在的静态目录。

Express会将其视为普通的html目录,并尝试查找索引文件。 从您的索引文件,角度将接管路由。

如果您想使用Express和模板进行路由,则最好的方法是这样做。

如果要表达从视图文件夹中加载模板文件的权限,请设置视图文件夹。

您也可以与角度混合搭配。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM