Javascript 如何使用Yesod构建AngularJS应用程序

我成功地用YesSOD编写了一个小应用程序。现在我正处在一个阶段，我想给它添加更好的交互，我想用AngularJS来实现这一点

就我所见，Yesod中对AngularJS的支持仍然是实验性的。此外，到目前为止，我发现的文档对我来说是不可获取的。我并没有掌握所有的Yesod概念

所以我想知道，集成AngularJS和Yesod框架的可能方法是什么。我想做的是：

用AngularJS编写前端

使用Yesod开发web服务

通过GET和POST http请求连接前端和web服务。信息可以通过输入表单发送到服务器（以这种方式利用一些YesSOD功能），信息可以通过JSON对象发送到前端

理想情况下，我想用Haskell来写所有的东西，但在目前的情况下，这可能是不可能的。因此，我想问，我心目中的替代方案是否是一个好的方案，以及是否有改进的方法

多谢各位

所以我对haskell或yesod一无所知，但是把angular和yesod结合起来并不难请务必按照以下步骤操作，以获得一个可用的应用程序

以下是我设置的步骤

• 按照YesSOD快速启动设置YesSOD应用程序
  brew安装haskell堆栈
  堆栈新建我的项目yesod sqlite和cd我的项目
  烟囱安装yesod bin cabal安装——安装ghc

  {
      "directory": "static/bower_modules"
  }
  

  堆栈构建
  stack exec--yessod-devel

<div class="jumbotron">
    <div class="container">
        <div class="page-header" align="center">
          <h1>Haskell <small>+</small> Angular</h1>
        </div>
        <div class="well well-lg">
            <div class="row">
                <div class="col-lg-12">
                <form role="form" ng-submit="post()">
                        <legend>Post a comment</legend>
                        <div class="form-group">
                            <label for="">Message</label>
                            <input type="text" class="form-control" placeholder="Message" ng-model="message">
                        </div>
                        <button type="submit" class="btn btn-primary">Comment</button>
                    </form>
                </div>
            </div>
            <hr style="border: 2px solid steelblue">
            <div class="row">
                <div class="col-lg-6" ng-repeat="comment in comments">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Comment #{{ comment.id }}</h3>
                        </div>
                        <div class="panel-body">
                            {{ comment.message }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

现在，您可以访问一个简单的OTB web应用程序。生成的应用程序具有以下结构：

• 我使用bower来设置pull-in-angular、jQuery和bootstrap
• 我使用一个自定义的.bowerrc文件来拉静态文件夹中的包

.bowerrc

{
    "directory": "static/bower_modules"
}

bower.json

{
  "name": "my-project",
  "version": "0.0.0",
  "authors": [
      "Atef Haque <atefth@gmail.com>"
  ],
  "description": "Haskell with Angular",
  "keywords": [
      "haskell",
      "angular"
  ],
  "license": "MIT",
  "ignore": [
      "**/.*",
      "node_modules",
      "bower_components",
      "static/bower_modules",
      "test",
      "tests"
  ],
  "dependencies": {
      "angular": "~1.5.3",
      "angular-route": "~1.5.3",
      "bootstrap": "~3.3.6"
  }
}

layout.html

<div class="jumbotron">
    <div class="container">
        <div class="page-header" align="center">
          <h1>Haskell <small>+</small> Angular</h1>
        </div>
        <div class="well well-lg">
            <div class="row">
                <div class="col-lg-12">
                <form role="form" ng-submit="post()">
                        <legend>Post a comment</legend>
                        <div class="form-group">
                            <label for="">Message</label>
                            <input type="text" class="form-control" placeholder="Message" ng-model="message">
                        </div>
                        <button type="submit" class="btn btn-primary">Comment</button>
                    </form>
                </div>
            </div>
            <hr style="border: 2px solid steelblue">
            <div class="row">
                <div class="col-lg-6" ng-repeat="comment in comments">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Comment #{{ comment.id }}</h3>
                        </div>
                        <div class="panel-body">
                            {{ comment.message }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

哈斯克尔+角
发表评论
消息
评论

注释#{Comment.id}
{{comment.message}}

在这一点上，我们都设置在前端。现在，我必须将后端配置为只提供一个index.html，angular可以从中接管

• 我编辑了templates/default-layout-wrapper.hamlet，去掉了大部分默认内容

默认布局包装器.hamlet头部

{{title}}
^{pageHead pc}

默认布局包装器.hamlet正文

不幸的是，Stackoverflow可能不允许哈姆雷特代码片段，所以我不得不将其分开

现在，当你去的时候，你会有一个有棱角的前端由一个yesod后端驱动的web应用程序

---

看似神奇的东西

{
    "directory": "static/bower_modules"
}

在没有任何后端代码的情况下发布评论是否有效？不，是OTB:）

---

希望我能比他们想得更清楚

你看到迈克尔·斯诺曼的仓库了吗：？是的。这是我提到的“我无法访问”的资源之一。鉴于我对Yesod的理解有限，我需要一些教程格式的东西。我不想以一个我不理解的解决方案结束。这就是为什么我考虑采用我描述的“快捷方式”。请看：另外，如果您希望角度布线正常运行，您需要在

config/routes

中创建一个为该

默认布局包装器提供服务的全面布线。hamlet

。就像这个问题的答案：这里也有这个帖子：现在我读了这篇帖子，我想我肯定比我回答这个问题时理解得多了一点！