如何使用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({...}); });
- Angular 2.在共享主机上运行
- 不能npm安装karma-ng-html2js-preprocessor
- NavBar地址加载angular模板,但不是根shell
- AngularJS的$ routeProvider templateUrl总是使用Express返回404
- Nodejs http://test.dev:3000/api/profile。 没有'Access-Control-Allow-Origin'标题Origin'http:// localhost:9000'
- 从节点/angular度的数据url在浏览器中显示图像?
- Multivision的应用 – 寻找熟悉Joe Eames Course的MeanStack的人
- 从angular度到节点POST数据不工作
- 哟angular度错误