Question

我设法使用Yesod成功编写了一个小应用程序。现在我处于我希望为其添加更好的交互的阶段，我想使用AngularJS来做到这一点。

据我所知，Yesod对AngularJS的支持仍然是实验性的。而且，到目前为止我找到的文档对我来说是无法访问的。我不掌握所有的Yesod概念。

所以我想知道，有哪些方法可以集成AngularJS和Yesod框架。我正在考虑做的是：

在AngularJS中编写前端。
使用Yesod开发网络服务。
通过GET和POST http请求连接前端和Web服务。可以通过输入表单（以这种方式利用一些Yesod功能）将信息发送到服务器，并且可以通过JSON对象将信息发送到前端。

理想情况下，我想在Haskell中编写所有内容，但在目前的情况下可能不可能。因此，我想问一下我心中的另一种选择是否合适，以及是否有办法改进它。

谢谢。

Answer 1

所以我不知道有关haskell或yesod的事情，但是将角度与Yesod整合起来并不困难。 请按照以下步骤操作，以便找到合适的应用程序！

以下是我设置的步骤

按照Yesod快速入门设置Yesod应用程序

brew install haskell-stack

堆叠新的my-project yesod-sqlite＆amp;＆amp; cd my-project

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

堆叠构建

堆栈执行 - yesod devel

现在您可以访问简单的OTB网络应用here。生成的应用程序具有以下结构：

我用bower来设置拉入角度，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"
  }
}

运行bower install会将软件包安装在 static / bower_packages 目录中

现在我分别在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>

此时我们已经在前端设置了所有设置。现在我必须将后端配置为仅从角度可以接管的index.html服务！

我编辑了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

<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可能不允许使用哈姆雷特代码片段，所以我不想将它分开

现在当你去here时，你将拥有一个带有角度前端的网络应用程序，该应用程序由yesod后端驱动。

可能看似神奇的事情

发布评论没有任何后端代码？不，它来了OTB：）

希望我能让思考比他们更清楚！

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

1 个答案: