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

2023-11-25

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

我首先在不使用 ngRoute 的情况下部署了一个 Hello World,意思是:没有部分。那是美好而顺利的。然后,我尝试推送 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>

部分“templates/second.html”

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

部分“templates/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 应用程序中托管 AngularJS 应用程序?如果是这样,我做错了什么?如果不是,最好的方法是什么?


我发现我的问题正在查看this例子。

实际的问题是我没有用express“公开”目录:

app.use(express.static(__dirname));

这是你好世界

索引.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);

Procfile

web: node index.js

模板/index.html

<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>

模板/第二个.html

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

我希望这可以帮助别人。

回答我的问题。是的,有可能,我做错的是没有使模板(文件)可访问。如果您想对可访问的内容有额外的安全性,您可以创建一个名为 public 的文件夹。然后将该目录设为静态:

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

那么您还可以使用不同的路由来与您的应用程序进行通信,甚至是 REST 方式。喜欢:

app.get('/users', function(req, res) {
    res.json({...});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Node.js 在 Heroku 中托管 AngularJS 应用程序而不使用 yeoman? 的相关文章

随机推荐

  • 自定义 UIControl 和手势识别器

    我正在尝试创建一个类似于滑块的自定义 UIControl 该控件是一个视图的子视图 该视图还附加了一个点击手势识别器 现在的问题是这个点击手势识别器取消了发送到我的控件的触摸 有没有办法可以从我的控件的代码中覆盖它 如果我查看 iOS 中的
  • 如何使 macOS 框架可在 Nix 环境中 clang?

    我在 macOS 10 13 5 上学习 Rust 编程 并使用 Nix 来控制我的开发环境 一些行动 例如包括jsonwebtoken库或安装cargo watch模块 导致构建需要似乎未安装的 macOS 框架 我收到此错误消息 not
  • 在 VideoView 中播放视频时 Android 后退按钮不起作用

    在 VideoView 中播放视频时 Android 后退按钮不起作用 但它在播放视频之前有效 我正在为 VideoView 使用自定义 MediaController 我尝试使用调度按键事件 它不起作用 使用 VideoView 的 Ac
  • 将 ggplot2 颜色条刻度线更改为黑色

    在我的一些图中 我发现很难看到颜色条中的刻度线 我还没有找到改变蜱虫颜色的记录方法 所有示例似乎都集中在更改标签或根本不绘制刻度线 是否可以 Data require ggplot2 require grid n lt 100 x lt y
  • 给定一个时间,如何找到一个月前的时间

    给定一个时间 如何查找一个月前的时间 strtotime 1 month timestamp http php net manual en function strtotime php
  • Android:java.net.DatagramSocket.bind:无效参数异常

    背景 我正在编写一个简单的 UDP 应用程序来 ping 一个测试版服务器 我每分钟左右管理一次 告诉我它仍在运行 对于那些想知道的人 我无法在服务器上启用 ping 我计划在手机上运行此命令 以便在服务器不再响应时向我发出警告 我正在尝试
  • 如何将 Windows 的 EOL 设置为 LF,以便 API 通过 \n 获取值。不是 \r\n

    我使用 monaco editor create 方法来创建模型 问题是 monaco 正在将多行代码解析为 Windows 操作系统中的 r n 格式 我尝试在 monaco editor create 的 editorOptions 中
  • C++ IO 流简介

    我得到了一段代码本文我很困惑它是如何工作的 该片段开头写道 您可以通过测试读取结果来检测特定读取或写入操作是否失败 例如 要检查是否从用户读取了有效的整数 您可以执行以下操作 int x if cin gt gt x cout lt lt
  • Amazon S3 静态站点提供旧内容

    我的 S3 存储桶托管一个静态网站 我没有设置cloudfront 我最近更新了 S3 存储桶中的文件 当文件更新时 我在存储桶中手动确认 它仍然提供旧版本的文件 S3 上托管的静态网站是否存在某种缓存或版本控制 到目前为止我还没有找到任何
  • Backbone.js 在集合添加时触发渲染两次

    我正在使用 Todos 示例应用程序与最新版本的 Backbone 捆绑在一起 0 9 2 在学习 Backbone js 时 我的问题是 为什么应用程序设计为在将模型添加到 Todos 集合时触发渲染事件两次 如果我将此行放在 TodoV
  • 在数据库中存储性别(性别)

    我想以尽可能小的 大小 性能 成本将用户的性别存储在数据库中 到目前为止 我想到了 3 个场景 Int 与代码中的 Enum 对齐 1 男性 2 女性 3 char 1 Store m f或另一个单字符标识符 Bit 布尔值 该选项有合适的
  • ActionMailer 中的 Rails 3 Render Prawn pdf

    如何在ActionMailer中将大虾的pdf渲染为附件 我使用delayed job并且不明白 如何在操作邮件程序中 而不是在控制器中 渲染pdf文件 我应该使用什么格式 您只需要告诉 Prawn 将 PDF 渲染为字符串 然后将其作为附
  • Postgres 和 jsonb - 在任意键搜索值

    是否可以在 Postgres 的 JSONB 列中的任何键处查找给定值 在文档中我看不到任何例子 a 处的示例值JSONB column a 1 b 2 c 3 我想找到所有有的记录1作为任何地方的值 注意 可能还有其他键a b c目前未知
  • 往返数据的 Swift 数字类型

    Swift 3 倾向于Data代替 UInt8 我试图找出将各种数字类型 UInt8 Double Float Int64 等 编码 解码为数据对象的最有效 惯用的方法 There s 这个答案使用 UInt8 但它似乎使用了我在 Data
  • 在 SQL 代理作业中运行 C# 代码

    我有一段代码需要每天在指定时间运行 现在的代码是我的网络应用程序的一部分 有 2 个存储过程用于获取 保存代码使用的数据 如何设置 Microsoft SQL Server Management Studio 2008 R2 来执行我的代码
  • PsExec 在从编译为“Windows 应用程序”的非常简单的 C# 或 C++ GUI 程序执行时挂起

    我在从编译为 Windows 应用程序 而不是 控制台应用程序 的非常简单的 c 或 c gui 程序执行时遇到 PsExec 挂起 在下面 下面的 C 部分我粘贴了代码来重现问题 而 D 部分下我粘贴了 C 代码来重现相同的问题 当 ps
  • Php str_replace 不适用于特殊字符

    为什么这没有按预期工作 echo str replace F d ration Camerounaise de Football result F d ration Camerounaise de Football 我期待有 F d rat
  • k2 组件将其图像存储在数据库中的哪里?

    我想检索 查询 joomla k2 组件存储的图像 在图像选项卡下 要显示 K2 项目图像 您可以使用此 echo media k2 items cache md5 Image K2 ITEM ID HERE XL jpg
  • 如何获取引发异常的行号?

    In a catch块 如何获取引发异常的行号 如果您需要的不仅仅是从 Exception StackTrace 获得的格式化堆栈跟踪的行号 您可以使用堆栈跟踪 class try throw new Exception catch Exc
  • 如何使用 Node.js 在 Heroku 中托管 AngularJS 应用程序而不使用 yeoman?

    我正在尝试使用 Node js 将使用 AngularJS 的 Hello World 构建推送到 Heroku 中 但具有多个视图 部分 我首先在不使用 ngRoute 的情况下部署了一个 Hello World 意思是 没有部分 那是美