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

这是我的项目结构。 项目结构

我试图从“public”文件夹中的angular度路由文件(app> public> main.js)中的“views”文件夹中调用ejs文件(app> views> list.ejs)。 但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> 

还有什么我必须做的服务器文件? 我错过了什么?

公用文件夹不能访问该文件夹以外的文件,即像node_modulesviews routes等其他文件夹,这就是为什么你无法从你的angular main.jsangular-route.js文件加载list.ejs

Viewsexpress用来根据发送到backend的请求呈现视图模板(ejs)。 他们不能用于前端路由。 它们只能被exprss应用程序访问,而不能被公用文件夹访问。

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

我会build议你在公用文件夹中创build一个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入门文档 ,了解有关如何执行此操作的更多信息。

我希望这可以帮助你。

我不知道你在后端使用什么,但是,当你从快速渲染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度边保留在公共文件夹中。

或者你可以加载HTML文件,而不是通过ejs ejs

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

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