我的应用程序不会在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没有加载并显示消息无法GET /public/views/bemVindo.html进入控制台网络chrome
以下是我的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
这是我的应用程序的基础结构
对不起,伙计们,如果你不明白的话告诉我pl。
抱歉我的英文
deek:
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);
});
错误无法获取/
答案 0 :(得分:0)
您提供的路径必定是错误的,请检查文件所在的路径,尝试在javascript控制台中控制路径并提供正确的路径。 &#34;无法获得/public/views/bemVindo.html"表示文件bemVindo.html不在文件夹/ public / views中。它无法找到该文件因此显示此错误。
答案 1 :(得分:0)
摆脱:
app.set('views', __dirname + 'views');
app.set('view engine', 'html');
不需要....查看引擎html是默认的。视图文件夹未被使用。
编辑:删除它:
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从中加载模板文件但您没有,则设置视图文件夹。
你也可以混合搭配角度。