我成功地使用 Yesod 编写了一个小应用程序。现在我正处于想要为其添加更好的交互的阶段，我想使用 AngularJS 来实现。

据我所知，Yesod 对 AngularJS 的支持仍处于试验阶段。此外，到目前为止我找到的文档对我来说是相当难以访问的。我没有掌握所有 Yesod 概念。

所以我想知道，集成 AngularJS 和 Yesod 框架的可能方法有哪些。我想做的是:

1. 使用 AngularJS 编写前端。
2. 使用 Yesod 开发网络服务。
3. 通过 GET 和 POST http 请求连接前端和网络服务。信息可以通过输入表单的方式发送到服务器(以这种方式利用Yesod的一些能力)，信息可以通过JSON对象的方式发送到前端。

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

谢谢。

最佳答案

So I don't know a thing about haskell or yesod but it wasn't too difficult to integrate angular with Yesod. Please do follow the steps in order to end up with a working app!

这是我设置的步骤

• 按照 Yesod 快速入门设置 Yesod 应用

  brew 安装 haskell-stack

  stack new my-project yesod-sqlite && cd my-project

  堆栈安装 yesod-bin cabal-install --install-ghc

  堆栈构建

  stack exec -- yesod devel

Now you can access a simple OTB web app here. The generated app has the following structure:

• 我使用 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"
  }
}

Running bower install installs the packages inside the static/bower_packages directory

• 现在我分别在 static/scripts 和 static/templates 目录中添加了我的脚本和模板

app.js

var app = angular.module('app', ['ngRoute']);

app.run(['$rootScope', function ($rootScope) {
    $rootScope.title = 'home';
}]);

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl : 'static/templates/layout.html',
        controller  : 'HomeCtrl'
    });
}])

app.controller('HomeCtrl', ['$scope', 'Comment', function ($scope, Comment) {
    $scope.comments = [];
    $scope.post = function () {
        Comment
        .post($scope.message)
        .success(function (data) {
            $scope.comments.push(data);
        })
        .error(function (error) {
            console.log(error);
        });
    };
}])

app.service('Comment', ['$http', function ($http) {
    this.post = function (comment) {
        return $http
        .post('http://localhost:3000/comments', {message: comment})
    }
}])

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>

At this point we're all set up on the front-end. Now I had to configure the backend to serve just the one index.html from where angular can take over!

• 我编辑了 templates/default-layout-wrapper.hamlet 并删除了大部分默认内容

default-layout-wrapper.hamlet head

<!doctype html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="UTF-8">

    <title>{{ title }}
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <style link="rel" src="static/bower_modules/bootstrap/dist/css/bootstrap.min.css">

    ^{pageHead pc}

default-layout-wrapper.hamlet 正文

<body>
    <div class="container" ng-controller="HomeCtrl">
      <div ng-view>
    <script type="text/javascript" src="static/bower_modules/jquery/dist/jquery.min.js">
    <script type="text/javascript" src="static/bower_modules/bootstrap/dist/js/bootstrap.min.js">
    <script type="text/javascript" src="static/bower_modules/angular/angular.js">
    <script type="text/javascript" src="static/bower_modules/angular-route/angular-route.min.js">
    <script type="text/javascript" src="static/scripts/app.js">

不幸的是，Stackoverflow 可能不允许 hamlet 代码片段，所以我不得不将它分开

Now when you go here you'll have a web app with an angular front-end powered by a yesod backend.

看似魔法的东西

1. 发表评论不需要任何后端代码？不，它来自 OTB :)

希望我的想法比以前更清晰!

关于javascript - 如何使用 Yesod 构建 AngularJS 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26970640/