【发布时间】：2017-10-24 19:44:57
【问题描述】：
我正在尝试让一个小的 Angular 脚本在我的 .html 页面中工作。如果我在浏览器中将该页面作为静态页面加载，Angular 脚本将正确运行。如果我运行在 res.render 语句下加载同一页面的 node.js 应用程序，则 Angular 脚本不会运行。
我的理论是我的 Angular 代码与运行的 Express.js 代码冲突。但是，我不确定如何。
这是我的脚本。
index.html
<body>
<!--INCLUDE - JS LIBRARIES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<!--INCLUDE - ANGULAR CONTROLLER -->
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function ($scope) {
$scope.cucmpub = "x.x.x.x";
});
</script>
<!--BODY - BOOTSTRAP PAGE SETUP -->
<div class="container-fluid" ng-app="">
<div class="row">
<div class="col-md-12">
<!--BODY - BOOTSTRAP NAVBAR -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">CUCM
<sup>2</sup>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">
<img src="https://png.icons8.com/marker/office/16" title="Marker" width="16" height="16"> CSS Map</a>
</li>
<li>
<a href="/">
<img src="https://png.icons8.com/phone/ultraviolet/20" title="Phone" width="16" height="16"> SIP2SIP</a>
</li>
<li>
<a href="/">
<img src="https://png.icons8.com/bug/color/24" title="Bug" width="16" height="16"> Debugger</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a ng-href="https://{{cucmpub}}/ccmadmin/" target="_blank">{{cucmpub}}</a>
</li>
</ul>
</div>
</nav>
<!--BODY - CONTENT-->
<div class="row">
<div class="col-md-12" class="pull-left">
<form class="form-horizontal" method="post" action="/cucmmapper/submit" id="cucmmapper">
<!-- INPUT - TEXT-->
<div class="form-group">
<label class="col-md-4 control-label" for="cucmpub">CUCM Publisher</label>
<div class="col-md-4">
<input id="cucmpub" name="cucmpub" type="text" placeholder="x.x.x.x" class="form-control input-md" required="" ng-model="cucmpub">
</div>
</div>
<!-- INPUT - SELECT-->
<div class="form-group">
<label class="col-md-4 control-label" for="cucmpub">CUCM Version</label>
<div class="col-md-4">
<select class="form-control" id="cucmversion" name="cucmversion">
<option>11.5</option>
<option>11.0</option>
</select>
</div>
</div>
<!-- INPUT - TEXT-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">AXL Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="username" class="form-control input-md" required="">
</div>
</div>
<!-- INPUT - PASSWORD-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
</div>
</div>
<!-- INPUT - BUTTON -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button class="btn btn-primary" type="submit">Map it!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
app.js
// APP - INCLUDE
const express = require('express')
const path = require("path")
const bodyParser = require("body-parser")
const hbs = require('hbs')
var xml2js = require('xml2js');
var parser = new xml2js.Parser();
var opn = require('opn');
// APP - DEFINITION
const app = express()
// APP - BUILD
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.engine('html', require('hbs').__express);
app.set('view engine', 'html');
// EXPRESS ROUTE - INDEX
app.get('/', function (req, res) {
res.render('index.html', {
title: 'CUCM 2.0'
});
})
// EXPRESS ROUTING - INCLUDE - CUCM MAPPER
var routingextensions = require('./routes/cucmmapper.js')(app);
// APP - START
app.listen(3000, function () {
console.log('Please keep this terminal open until finished as it is running the backend API communications with CUCM.')
});
opn('http://localhost:3000');
在这方面我还是个新手，非常感谢任何帮助或建议。谢谢大家！
【问题讨论】：
-
“脚本无法运行”是什么意思？有错误吗？不管是不是新手，这个问题需要明确的问题陈述才能成为话题。
-
我认为这个问题很清楚。这是 Node 中静态文件的标准问题。
-
你在浏览器控制台查看网络日志了吗？您从 index.html 链接的所有资源都可能处于未找到状态 404（或者可能是 403 禁止），对吗？那是因为您正在呈现一种资源，即 index.html，但站点的其余部分无法通过静态托管获得。请参阅 gycs 答案，以及 stackoverflow.com/questions/22974294/… 和 stackoverflow.com/questions/16432847/… 以及其他有关 Nodejs 中静态托管的相关问答
-
@ThisClark 感谢您的帮助。我确实查看了我的网络日志，所有内容都显示为 200 秒的状态消息。
标签： javascript angularjs node.js express