脚本工作,但不是与node.js

我正在尝试在我的.html页面中使用一个小的Angular脚本。 如果我在浏览器中将页面加载为静态页面,则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 = "xxxx"; }); </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="xxxx" 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'); 

我仍然是一个新手,非常感谢任何帮助或build议。 谢谢你们!

节点没有find“公共”文件夹。

试试这条线:

 app.use(express.static(__dirname + '/public')); 

https://nodejs.org/docs/latest/api/modules.html#modules_dirname

另外,如果你曾经为你的库(而不是cdn)使用包pipe理器,你将不得不添加下面这行:

 app.use('/bower_components', express.static(__dirname + '/bower_components'));