如何使用Node.js在Heroku中托pipeAngularJS应用程序而不使用yeoman?

我正在尝试使用Node.js将AngularJS的Hello World构build推送到Heroku中。 但有多个视图(partials)。

我首先部署了一个没有使用ngRoute的Hello World,意思是:没有偏见。 这很好,顺利。 然后,我尝试推2个简单的部分。 但我相信这个问题是主办应用程序,同时要求部分。 我知道这不是正确的方法,我想要你的build议。

这是我的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> 

我的快速应用程序

 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应用程序中托pipe一个AngularJS应用程序,我在那里存储partials? 如果是这样,我做错了什么? 如果不是,最好的办法是什么?

那么,我不知道为什么我会投下一票。 但无论如何,我发现我的问题看这个例子。

实际的问题是我没有用“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> 

我希望这可以帮助别人。

回答我的问题。 是的,这是可能的,我做错了没有使模板(文件)访问。 如果你想在可访问性上有额外的安全性,你可以创build一个名为public的文件夹。 然后使该目录静态:

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

那么你也可以有不同的路线,甚至RESTfully与你的应用程序进行通信。 喜欢:

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