AngularJS 的 $routeProvider templateUrl 总是使用 Express 返回 404
Posted
技术标签:
【中文标题】AngularJS 的 $routeProvider templateUrl 总是使用 Express 返回 404【英文标题】：AngularJS's $routeProvider templateUrl is always returning 404 using Express 【发布时间】：2016-03-10 20:54:48 【问题描述】：所以问题是 AngularJS 的 $routeProvider/ngRoute 没有按我的需要工作。我无法让它在其路线上显示相应的.html 页面。当我尝试在我的index.ejs 页面中加载模板时，我总是收到GET http://localhost:3000/home.html 404 (Not Found)。
我尝试了多种路径来加载.html，但我没有成功。我什至为应用程序中的每个文件夹创建了home.html，看看它是否会抓取任何东西，但没有任何效果。 ng-include 直接注入 html 时也不起作用。
/app.js 简化：原始代码使用express.router()
var express = require('express');
var app = express();
var path = require('path');
var ejs = require('ejs');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req,res,next)
res.render('index', page: 'index' );
);
app.listen(3000,function() console.log('3k'); );
/views/index.ejs
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>WHY???</title>
</head>
<body>
<div class="main">
<div ng-view></div>
</div>
<script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular-route/angular-route.js"></script>
<script src="/angular/angularApp.js"></script>
</body>
</html>
/public/angular/angularApp.js
var App = angular.module('App',['ngRoute']);
App.config(['$routeProvider', function($routeProvider)
$routeProvider
.when('/',
templateUrl: 'views/index/home.html'
)
.when('/team',
templateUrl: '/views/index/team.html'
)
.when('/faq',
templateUrl: '/views/index/faq.html'
)
.otherwise(
redirectTo: '/'
)
]);
home.html, team.html, and faq.html 都有用于测试目的的简单代码行。示例：<h1> This is home.html </h1>
文件夹结构
app.js
public/
|-vendor/
|-angular/
| |-angularApp.js
views/
|-index.ejs
|
|-index/
| |-home.html
| |-faq.html
| |-team.html
【问题讨论】：
这似乎是一个路径问题..您必须检查您的视图的正确路径.. @Ved 我该怎么做？我所知道的是 express 的静态视图路径设置为views。除此之外，我不知道如何检查 AngularJS 的当前搜索路径。
app.get('/', function(req, res) res.sendfile('./path/index.html'); );试试这个。
你能发布你的文件夹结构吗？
views/ 和 public/ 是否与 app.js 处于同一级别？
【参考方案1】：
Node/Express 从“公共”文件夹静态地提供所有内容。您需要设置所有相对于公共目录的 URL。您的索引文件夹应移至公共目录。
app.js
public/
|-vendor/
|-angular/
| |-angularApp.js
|views/
| |-index/
| | |-home.html
| | |-faq.html
| | |-team.html
views/
|-index.ejs
这个文件夹结构应该可以工作。 还要解决这个问题：
when('/',
templateUrl: '/views/index/home.html'
)
【讨论】：
天哪，我爱你。但是你能解释一下为什么 AngularJS 会关注 Express 静态目录吗？这解释了为什么我的另一个应用程序可以工作。 URL 中的前导“/”指的是基础服务器。在整个应用程序中，服务器假装公用文件夹就是它所看到的所有内容。您的 index.ejs 文件被渲染的事实是通过 res.render 方法。但就角度而言，只有公用文件夹存在！以上是关于AngularJS 的 $routeProvider templateUrl 总是使用 Express 返回 404的主要内容，如果未能解决你的问题，请参考以下文章
AngularJs：使用 $routeProvider 调用控制器两次
AngularJs routeProvider http状态403
angularjs 报错Unknown provider: $routeProvider
AngularJS 的 $routeProvider templateUrl 总是使用 Express 返回 404