Question

这是我的项目结构。

我正在尝试调用ejs文件（app＆gt; views＆gt; list.ejs），该文件位于＆＃34; views＆＃34;来自角度路由文件（app＆gt; public＆gt; main.js）的文件夹，它位于＆＃34; public＆＃34;夹。但是list.ejs没有加载。

＆＃13;

/************main.js****************/
var fsApp=angular.module('chart-app');
fsApp.config(function($routeProvider) {
 $routeProvider
 .when('/', {
	templateUrl: 'list.ejs',
	controller: 'listCtrl'
})

/*In my server.js server file I am calling the files in public folder this way: */
app.use('/static',express.static(__dirname + '/public'));
app.get('/',function(req,res){
  res.render('index.ejs');
});

＆＃13;

<!--In index.ejs (where my <ng-view></ng-view> is) I am including the link for static files:-->

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="/static/angular-route.js"></script>
<script src="/static/main.js"></script>
</head>
<body ng-app="chart-app" class="container-fluid">
<div ng-controller="fairshareCtrl">
	<div class="row" ng-view></div>
</div>
</body>

＆＃13;

我还需要在服务器文件上做些什么吗？我错过了什么？

Answer 1

我不知道你在后端使用了什么，但是当你从express渲染ejs文件时，你必须为它定义引擎。

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

然后你可以使用

app.get('*',function(req,res){
   res.render('index.ejs');
});

并将所有角度边保留在公共文件夹中。

或者您可以通过ejs

加载html文件而不是ejs

app.engine('html', require('ejs').renderFile);

app.get('*', (req, res) => {
    res.render('index.html');
})

Answer 2

public文件夹无法访问该文件夹外的文件，即node_modules，views routes等其他文件夹。这就是您无法加载的原因来自list.ejs angular或main.js文件的angular-route.js。

Views使用

express根据发送到backend的请求呈现视图模板（ejs）。它们不能用于前端路由。它们只能由exprss app访问，但不能访问公共文件夹。

对于前端路由，您只需将所有模板存储在public文件夹中。

我建议您在templates文件夹中创建一个public文件夹，并在角度路由中使用address。

public  
  --templates
     --list.html
  --angular-route.js
  --main.css
  --main.js

在你的角度路由中使用它。

fsApp.config(function($routeProvider) {
 $routeProvider
 .when('/', {
    templateUrl: 'templates/list.html',
    controller: 'listCtrl'
})

我认为您可能需要在视图文件中包含ejs.js，以支持前端中的ejs模板。有关如何执行此操作的详细信息，请阅读ejs getting started doc。

我希望这会对你有所帮助。

Answer 3

我只需使用app.set('views', path.join(__dirname, '/public'));使ejs在public目录而不是views目录中查找

Angularjs在＆＃34; views＆＃34;中路由ejs静态文件来自＆＃34; public＆＃34;的文件夹express.js

3 个答案: