脚本有效但不适用于 node.js

Question

I am trying to get a small Angular script to work within my .html page.我试图让一个小的 Angular 脚本在我的 .html 页面中工作。 If I load the page as a static page in my browser, the Angular script will run correctly.如果我在浏览器中将页面作为静态页面加载，Angular 脚本将正确运行。 If I run my node.js app which loads the same page under a res.render statement, the Angular script does not run.如果我运行在 res.render 语句下加载相同页面的 node.js 应用程序，Angular 脚本不会运行。

My theory is that my Angular code conficts with the Express.js code running.我的理论是我的 Angular 代码与运行的 Express.js 代码冲突。 However, I'm not sure how.但是，我不确定如何。

Here are my scripts.这是我的脚本。

index.html索引.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应用程序.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!谢谢大家！

Answer 1

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 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:此外，如果您曾经为库（而不是 cdn）使用包管理器，则必须添加以下行：

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

脚本有效但不适用于 node.js

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-24 20:07:35

脚本有效但不适用于 node.js

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-24 20:07:35

解决方案1
1 已采纳 2017-10-24 20:07:35