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

Question

I'm trying to push a Hello World build with AngularJS into Heroku using Node.js. 我正在尝试使用Node.js将AngularJS的Hello World构建推送到Heroku中。 BUT with multiple views(partials). 但有多个视图（部分）。

I first deployed a Hello World without using ngRoute, meaning: without partials. 我首先在不使用ngRoute的情况下部署了Hello World，这意味着：没有部分。 That was fine and smooth. 那很好，很顺利。 Then, I tried to push 2 simple partials. 然后，我尝试推送2个简单的部分。 But I believe the issue is hosting the application and at the same time asking for partials. 但我认为问题是托管应用程序，同时要求部分。 I know it is not the right approach and I want your advice. 我知道这不是正确的方法，我想要你的建议。

This is my index.html: 这是我的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>

Partial 'templates/second.html' 部分'templates / second.html'

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

Partial 'templates/index.html' 部分'templates / index.html'

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

My express app: 我的快递应用：

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

And obviously, Procfile: 显然，Procfile：

web: node index.js

All the tutorials that I've found so far use Yeoman but I don't want to use Yeoman or any other scaffolding (if that is what that is) tool. 到目前为止我发现的所有教程都使用Yeoman，但我不想使用Yeoman或任何其他脚手架（如果那就是那个）工具。

Q: Is it possible to host an AngularJS app in the same Heroku application where I'm storing the partials? 问：是否可以在我存储部分的Heroku应用程序中托管AngularJS应用程序？ If so, what am I doing wrong? 如果是这样，我做错了什么？ If not, what is the best approach? 如果没有，最好的方法是什么？

Answer 1

Well, I don't know why I got a down vote. 好吧，我不知道为什么我会投票。 But any way, I found my issue looking at this example. 但无论如何，我发现我的问题正在看这个例子。

The actual issue was that I was not making "public" the directory with express: 实际问题是我没有使用express来“公开”目录：

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

Here is the hello world 这是你好世界

index.html 的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 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 Procfile

web: node index.js

templates/index.html 模板/ index.html的

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

templates/second.html 模板/ second.html

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

I hope this helps someone. 我希望这可以帮助别人。

To answer my question. 回答我的问题。 Yes, it is possible, what I was doing wrong is not making the templates(files) accessible. 是的，有可能，我做错了是不能使模板（文件）可访问。 If you want to have extra security on what can be accessible you could create a folder called, for example, public. 如果您希望在可访问的内容上获得额外的安全性，则可以创建一个名为public的文件夹。 Then make that directory static: 然后将该目录设为静态：

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

then you can also have different routes to communicate with your application even RESTfully. 那么你也可以有不同的路由与REST应用程序进行通信。 Like: 喜欢：

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

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

问题描述

1 个解决方案

解决方案1
18 已采纳 2014-11-23 04:47:29

Here is the hello world 这是你好世界

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

问题描述

1 个解决方案

解决方案1 18 已采纳 2014-11-23 04:47:29

Here is the hello world 这是你好世界

解决方案1
18 已采纳 2014-11-23 04:47:29