Although I had no prior knowledge of haskell or yesod, integrating angular with Yesod was surprisingly straightforward. Make sure to carefully follow the steps to create a functional app!

Below are the steps I took to get set up:

• Started with the Yesod quickstart guide to create a Yesod app

  brew install haskell-stack

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

  stack install yesod-bin cabal-install --install-ghc

  stack build

  stack exec -- yesod devel

You can now access a basic OTB web app here. The structure of the generated app is as follows:

https://i.sstatic.net/OZPEF.png

• Integrated angular, jQuery, and bootstrap using bower
• Utilized a custom .bowerrc file to store the packages in the static folder

.bowerrc

{
    "directory": "static/bower_modules"
}

bower.json

{
  "name": "my-project",
  "version": "0.0.0",
  "authors": [
      "Atef Haque <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6142021310070b33040503060e430e0200">[email protected]</a>>"
  ],
  "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 in the static/bower_packages directory

https://i.sstatic.net/bLoYf.png

• Added scripts and templates to the static/scripts and static/templates directories respectively

https://i.sstatic.net/ZkgOC.png

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>

With the frontend now set up, it was time to configure the backend to serve the index.html for angular to take control!

• Modified the templates/default-layout-wrapper.hamlet and removed unnecessary default content

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">

Unfortunately, Stackoverflow may not support hamlet code snippets, so I had to separate it.

Now, when you visit here, you'll have a web app with an angular frontend powered by a Yesod backend.

---

Notable Points to Consider:

1. Posting comments functions without additional backend code? Yes, it's built-in :)

I hope this explanation clarifies any confusion you may have had!