如何在Heroku中使用Node.js不使用yeoman托管AngularJS应用程序？ [英] How to host an AngularJS app in Heroku using Node.js WITHOUT using yeoman?
问题描述
我正在尝试使用Node.js将AngularJS的Hello World版本推送到Heroku。但是有多个视图（partials）。
I'm trying to push a Hello World build with AngularJS into Heroku using Node.js. BUT with multiple views(partials).
我首先部署了一个Hello World，而不使用ngRoute，意思是：没有部分。那很好，顺利。然后，我试图推动2个简单的部分。但我相信这个问题是托管应用程序，同时要求部分。我知道这不是正确的方法，我想要你的建议。
I first deployed a Hello World without using ngRoute, meaning: without partials. That was fine and smooth. Then, I tried to push 2 simple partials. 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.
这是我的index.html：
This is my 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'
Partial 'templates/second.html'
<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>
部分'templates / index.html'
Partial '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：
And obviously, Procfile:
web: node index.js
我所有的教程发现到目前为止使用Yeoman，但我不想使用Yeoman或任何其他脚手架（如果是那样）工具。
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.
问：是否可以在同一个Heroku应用程序中托管一个AngularJS应用程序，其中存储部分内容？如果是这样，我做错了什么？如果没有，最好的方法是什么？
Q: Is it possible to host an AngularJS app in the same Heroku application where I'm storing the partials? If so, what am I doing wrong? If not, what is the best approach?
推荐答案
嗯，我不知道为什么我有一个投票。但是无论如何，我发现我的问题看着
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:
app.use(express.static(__dirname));
这是hello world
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>
templates / second.html
<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>
我希望这有助于某人。
回答我的问题是的，这是可能的，我做错了什么不是使模板（文件）可访问。如果你想对可以访问的内容有额外的安全性，你可以创建一个名为的文件夹，例如public。然后使该目录静态：
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. Then make that directory static:
app.use(express.static(__dirname + '/public'));
那么您也可以使用不同的路由与REST应用程序进行通信。喜欢：
then you can also have different routes to communicate with your application even RESTfully. Like:
app.get('/users', function(req, res) {
res.json({...});
});
这篇关于如何在Heroku中使用Node.js不使用yeoman托管AngularJS应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
