我正在尝试使用 Node.js 将带有 AngularJS 的 Hello World 构建推送到 Heroku。但是有多个 View (部分)。
我第一次部署 Hello World 时没有使用 ngRoute，意思是:没有部分。那很好，很顺利。然后，我尝试推送 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>
部分“模板/second.html”
<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>
部分“模板/index.html”
<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>
我的 express 应用:
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 应用程序？如果是这样，我做错了什么？如果不是，最好的方法是什么？
最佳答案
我在查看 this 时发现了我的问题例子。
实际问题是我没有使用 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>
服务器/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({...});
});
关于angularjs - 如何在不使用 yeoman 的情况下使用 Node.js 在 Heroku 中托管 AngularJS 应用程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27074238/