个人中心
文章发布
退出
作者热门文章
- mongodb - 在 MongoDB mapreduce 中，如何展平值对象？
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗？
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
27
4
我正在尝试使用 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));
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/
27
4
0
我正在尝试全新安装 Yeoman，但在我尝试使用以下命令将其删除后，Yo 命令仍然存在: sudo npm remove -g yeoman npm remove -g yeoman sudo npm
当 yeoman 以嵌入形式运行时，我无法运行子生成器。 integrating yeoman in other tools 的文档提供这个例子: var yeoman = require('yeom
使用最新的 yeoman 更新 1.0，我们是否能够更改创建目录结构的方式？例如...如果我想在根目录而不是“/app”文件夹中创建我的文件，这可能吗？另外，如果我们想将我们的 Assets 文件夹命
我喜欢 Yeoman 的功能，例如 Package Manager (Bower)、Livereload 集成、Compass 等。 因此，我想用它来处理我的公共(public)网站。但是，我不想使用
我是创建 Yeoman Generator 的新手。我使用了 generator-generator 来让我开始，我经历了创建它、测试和把它全部搞定的过程。 在创建 yo 生成器的 tuts 中，他们
为什么不推荐 Yeoman 在他们的网站上写网站时建立网站 http://yeoman.io/road.html Clearing up misconceptions […] - Not recomm
尝试执行yo angular时出现以下错误: 在脚手架中，还有其他错误消息。 我做了: npm install -g yonpm install -g generator-angularyo angu
我试过console.log('message') ，但它以黑色返回消息。 有没有办法在生成器中记录彩色消息？ 最佳答案 对于查看此问题的新用户 console.log();根据 Documentat
我正在为一个相当典型的节点应用程序构建一个自耕农生成器: / |--package.json |--.gitignore |--.travis.yml |--README.md |--app/
几个月前，我使用生成器角度来搭建一个项目，整个生态系统(karma、Node 版本、grunt 包)已经取得了相当大的进展。我在运行测试、构建东西等方面不断遇到问题。 我知道我可以使用 nvm 降级我
我不小心安装了一个我不想要的生成器。 我找不到任何方法来删除它。 我应该怎么做才能实现这个目标？ 最佳答案 生成器只是普通的 npm 模块，因此您可以使用以下命令删除它 npm uninstall -
我创建了一个 Yeoman 生成器并希望我的团队使用它。 如果我在 Github 上更新我的生成器会发生什么？他们在本地安装了旧版本的生成器。他们是否总是需要重新安装才能获得最新版本？ 团队成员不知道
我正在构建一个生成器，最后我需要在应用程序的某个目录中进行npm install，我尝试了以下操作: this.spawnCommandSync('cd', [this.destinationRoot
在使用 Yeoman 搭建脚手架时，我想用模板替换应用程序中的部分内容。一切似乎都很顺利，但我在脚手架期间遇到了此冲突错误。 这个. 模板( '条件文件/html/_signup.email.html
我是一名 javascript 初学者，通过遵循编写第一个生成器教程并阅读其他生成器代码，我已经成功地使用我的第一个生成器实现了这一目标。 我尝试了各种方法来使其正常工作，但都失败了，如果有人能指出我
我正在为 yeoman 使用角度生成器，目前默认行为是我这样做的时候 yo angular:controller testController 我创建了 2 个文件 create app\script
所以我一直在为我的项目使用 yeoman.io，并且我为我的图像设置了文件夹结构。但是当我构建它时，我的文件的文件名发生了变化。 我什至使用: $ yeoman build:text 因为我只想缩小我
如何通过自耕农生成器创建一个空目录？ 我看过 mem-fs-editor ，但据我所知，只有在创建子文件时才会创建目录。我试过在子目录中创建一个文件，然后删除该文件，但这不起作用(我假设因为 mem-
我正在构建一个生成器，其中部分包含来自使用 exec 创建的另一个项目的脚手架.根据用户输入，我需要移动或删除此脚手架的一部分。 现在我正在用节点的 fs.child_process.spawn 做这
我正在跟踪yeoman.io上列出的示例Yeoman工作流程: npm install -g generator-angular generator-karma # install generato
我是一名优秀的程序员,十分优秀！