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_modules
, views
routes
等其他文件夹,这就是为什么你无法从你的angular
main.js
或angular-route.js
文件加载list.ejs
。
Views
被express
用来根据发送到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
目录中查找