【发布时间】:2017-03-27 13:58:32
【问题描述】:
我正在使用 ui-router 为 AngularJS 构建一个 web 应用程序,以通过 $stateProvider 处理我的路由,以便只有各种状态会在 ui-view 中呈现。
我有一个 server.js 文件,希望呈现 Web 应用程序将基于的初始脚手架(顶部导航、页脚..等),并且我希望使用此模板加载所有请求并填充每个单独的页面都使用模板。
但是,我不断收到 ERROR: Cannot find module 'html'。
我已经通过 stackoverflow 进行了挖掘,还尝试安装 EJS 以便我可以呈现我的 index.html 页面,但它仍然无法正常工作。
提供静态 html 模板并让 angular ui-router 完成其余路由的最佳方式是什么?
这是两个文件:
server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var routes = require('server/routes');
// Set Port
var PORT = process.env.PORT || 3000;
// Rendering configuration
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(bodyParser.json());
routes(app);
app.get('/*', function(req,res) {
res.render('index.html');
});
app.listen(PORT, function() {
console.log('Server running on ' + PORT)
});
config.js
import angular from 'angular';
import uiRouter from 'angular-ui-router';
// Factories
import todoFactory from 'factories/todo-factory';
// Controllers
import todosController from 'controllers/todosController';
import profileController from 'controllers/profileController';
import signupController from 'controllers/signupController';
import signinController from 'controllers/signinController';
const app = angular.module('airporter', [uiRouter, todoFactory.name]);
app.config(($stateProvider, $urlRouterProvider, $locationProvider) => {
$urlRouterProvider.otherwise('/');
$stateProvider
// Homepage
.state('home', {
url: '/',
templateUrl: 'views/index.html',
})
// Sign Up
.state('signup', {
url: '/signup',
templateUrl: 'views/signup/signup.html',
controller: signupController
})
// Sign In
.state('signin', {
url: '/signin',
templateUrl: 'views/signin/signin.html',
controller: signinController
})
//
.state('profile', {
url: '/profile',
templateUrl: 'views/profile/profile.html',
controller: profileController,
resolve: {
// logincheck: checkLoggedin
// if the following dependencies are successfully resolved you can access profile
}
})
.state('todos', {
url: '/todos',
templateUrl: 'views/todos/todos.html',
controller: todosController
})
.state('about', {
url: '/about',
templateUrl: 'views/about/about.html'
});
$locationProvider.html5Mode(true);
});
export default app;
【问题讨论】:
-
为什么要在 EJS 上设置视图引擎并使用 HTML 进行渲染?我的建议,切换到哈巴狗。轻松很多。我不是 EJS 专家,但您应该指向一个 HTML 页面,但类似: res.render('pages/index') 这可能就是您看到该错误的原因。
-
app.get('/*', function(req,res) { res.render('index.html'); });从字面上告诉节点对于每个请求它应该呈现index.html。当任何其他文件被请求时,index.html被渲染。这包括对脚本的请求、对部分的请求,甚至对 css 文件的请求。其中之一可能是包含'html'模块的文件。在设置节点配置时,您需要考虑静态目录,有多个问题的答案显示了这是如何完成的。
标签: javascript angularjs node.js express