Angularjs 从 express.js 的 "public" 文件夹路由 "views" 文件夹中的 ejs 静态文件

Question

这是我的项目结构。

我正在尝试从 angular 路由文件 (app > public 调用 "views" 文件夹中的 ejs 文件 (app > views > list.ejs) > main.js) 在 "public" 文件夹中。但是 list.ejs 没有加载。

/************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');
});

<!--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>

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

Answer 1

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

Views 被 express 使用，根据发送到 backend 的请求呈现视图模板 (ejs)。它们不能用于前端路由。它们只能通过 exprss 应用程序访问，但不能通过 public 文件夹访问。

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

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

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

在您的 angular 路由中像这样使用它。

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

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

希望对您有所帮助。

Answer 2

我不知道你在后端使用什么，但是，当你从 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');
});

并将所有 angular 面保存在 public 文件夹中。

或者您可以只加载 html 文件而不是通过 ejs

加载 ejs

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

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

Answer 3

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

Angularjs 从 express.js 的 "public" 文件夹路由 "views" 文件夹中的 ejs 静态文件

Angularjs routing ejs static files in "views" folder from "public" folder of express.js

ejs

node.js

express

mean-stack

gulp