如何使用Node.js在Heroku中托管AngularJS應用程序而不使用yeoman？

Question

我正在嘗試使用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應用程序？ 如果是這樣，我做錯了什么？ 如果沒有，最好的方法是什么？

Answer 1

好吧，我不知道為什么我會投票。 但無論如何，我發現我的問題正在看這個例子。

實際問題是我沒有使用express來“公開”目錄：

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>

Server / 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);

Procfile

web: node index.js

模板/ index.html的

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

模板/ second.html

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

我希望這可以幫助別人。

回答我的問題。 是的，有可能，我做錯了是不能使模板（文件）可訪問。 如果您希望在可訪問的內容上獲得額外的安全性，則可以創建一個名為public的文件夾。 然后將該目錄設為靜態：

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

那么你也可以有不同的路由與REST應用程序進行通信。 喜歡：

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

如何使用Node.js在Heroku中托管AngularJS應用程序而不使用yeoman？

問題描述

1 個解決方案

解決方案1
18 已采納 2014-11-23 04:47:29

這是你好世界

如何使用Node.js在Heroku中托管AngularJS應用程序而不使用yeoman？

問題描述

1 個解決方案

解決方案1 18 已采納 2014-11-23 04:47:29

這是你好世界

解決方案1
18 已采納 2014-11-23 04:47:29