如何使用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({...}); });
- 用azure发布时无法获取/ Node.js
- 计数由grunt监视的文件
- 将AngularJS应用程序部署到香草Apache HTTP服务器是常见的select吗?
- 如何构buildAngularjs / Leaflet / Node.js应用程序
- Yeoman Angular.js grunt serve-d应用从livereload.js有很长的延迟?snipver = 1
- 在Node.js / Express和AngularJS中创buildCORS请求
- 在AngularJS和Nodejs之间共享代码
- 如何通过Node JS&Angular JS实时显示ffmpeg的水印
- Karma-Coverage和Istanbul HTML报告不会输出到预期的目录