Script works but not with node.js
Question
I am trying to get a small Angular script to work within my .html page. If I load the page as a static page in my browser, the Angular script will run correctly. If I run my node.js app which loads the same page under a res.render statement, the Angular script does not run.
My theory is that my Angular code conficts with the Express.js code running. However, I'm not sure how.
Here are my scripts.
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');
I am still a newbie at all of this and greatly appreciate any help or suggestions. Thanks y'all!
1 answers
solution1
1 ACCPTED 2017-10-24 20:07:35
Node doesn't find the 'public' folder.
Try this line instead:
app.use(express.static(__dirname + '/public'));
https://nodejs.org/docs/latest/api/modules.html#modules_dirname
In addition, if you ever use a package manager for your libraries (instead of cdn) you will have to add this line:
app.use('/bower_components', express.static(__dirname + '/bower_components'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
node.js script works off command line but not from browser?
Node.js script works locally but not locally on firebase serve?
Node.js script hangs on require, but works fine in the REPL
Node.js script works once, then fails subsequently
Database connection works in node.js file but not in script tags
Does npm install mean the script only works with Node.js
Node.js find method works weird
“Insert into” doesn't works with node.js
Regular expression works on browser but not in Node.js
Node.js server works partly
Related Tags