如何在不使用yeoman的情况下使用Node.js在Heroku中托管AngularJS应用程序？

小编典典

如何在不使用yeoman的情况下使用Node.js在Heroku中托管AngularJS应用程序？

angularjs

我正在尝试使用Node.js将带有AngularJS的Hello World构建推送到Heroku中。但是有多个视图（局部）。

我首先不使用ngRoute部署了Hello
World，这意味着：没有局部。很好，很顺利。然后，我尝试推送2个简单的局部。但我认为问题在于托管应用程序，同时要求提供部分内容。我知道这不是正确的方法，我需要您的建议。

这是我的index.html：

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta name="name" content="something">
    <title></title>
</head>
<body>
    <section ng-view=""></section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    angular.module('main', ['ngRoute'])
    .config(['$routeProvider', '$http', function ($routeProvider, $http){
        console.log('hola');
        $routeProvider
        .when('/', {
            resolve: **??? I tried with templateUrl but did not work either**
            ,controller: 'indexCtrl'
        })
        .when('/second', {
            resolve: **???**
            ,controller: 'secondCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }])
    .controller('indexCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "Hello World";
    }])
    .controller('secondCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "World Hello";
    }]);
    </script>
</body>
</html>

部分“ templates / second.html”

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

部分“ templates / index.html”

<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>

我的快递应用：

var express = require('express'),
app = express();
app.set('view engine', 'html');
app.get('/', function(req, res) {
    res.sendfile('index.html', {root: __dirname })
});
app.get('/index', function (req, res){
    res.sendfile('templates/index.html', {root: __dirname })
});
app.get('/second', function (req, res){
    res.sendfile('templates/second.html', {root: __dirname })
});
var server = app.listen(process.env.PORT || 80);

显然，Procfile：

web: node index.js

到目前为止，我发现的所有教程都使用Yeoman，但我不想使用Yeoman或其他任何脚手架（如果是的话）工具。

问：是否可以在我存储部分的同一Heroku应用程序中托管AngularJS应用程序？如果是这样，我在做什么错？如果没有，最好的方法是什么？

阅读 175

2020-07-04

共1个答案

小编典典

好吧，我不知道为什么我要投反对票。但是无论如何，我在看这个例子时发现了自己的问题。

实际的问题是我没有使用express将目录设为“ public”：

app.use(express.static(__dirname));

这是你好世界

index.html

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta name="name" content="something">
    <title></title>
</head>
<body>
    <section ng-view=""></section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    angular.module('main', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider){
        console.log('hola');
        $routeProvider
        .when('/', {
            templateUrl: 'templates/index.html'
            ,controller: 'indexCtrl'
        })
        .when('/second', {
            templateUrl: 'templates/second.html'
            ,controller: 'secondCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }])
    .controller('indexCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "Hello World";
    }])
    .controller('secondCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "World Hello";
    }]);
    </script>
</body>
</html>

服务器/ index.js

var express = require('express'),
app = express();

app.use(express.static(__dirname));
app.get('/', function(req, res) {
    res.sendfile('index.html', {root: __dirname })
});
var server = app.listen(process.env.PORT || 80);

程序文件

web: node index.js

templates / index.html

<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>

templates / second.html

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

我希望这可以帮助别人。

回答我的问题。是的，有可能，我做错了是没有使模板（文件）可访问。如果要对可访问内容进行额外的安全保护，则可以创建一个名为public的文件夹。然后将该目录设为静态：

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

那么您还可以使用不同的路由来与您的应用程序进行通信，甚至可以是RESTful。喜欢：

app.get('/users', function(req, res) {
    res.json({...});
});

2020-07-04