Как создать приложение AngularJS с Yesod

Мне удалось написать небольшое приложение с помощью Yesod. Теперь я нахожусь в фазе, в которой я хочу добавить к ней лучшее взаимодействие, и я хотел бы сделать это с помощью AngularJS.

Насколько я вижу, поддержка AngularJS в Йесоде все еще экспериментальна. Более того, документация, которую я нашел до сих пор, для меня совершенно недоступна. Я не понимаю все концепции Yesod.

Так что мне было интересно, какие возможные способы интеграции AngularJS и рамки Yesod. Я думаю об этом:

Написание front-end в AngularJS.
Разработайте веб-сервис с помощью Yesod.
Подключить интерфейс и веб-сервис с помощью HTTP-запросов GET и POST. Информация может быть отправлена на сервер с помощью форм ввода (используя некоторые из возможностей Yesod таким образом), и информация может быть отправлена в интерфейс с помощью объектов JSON.

В идеале я хотел бы написать все в Haskell, но в текущем состоянии дел это может быть не так. Таким образом, я хотел спросить, есть ли альтернатива, которую я имею в виду, хорошая и есть ли способы ее улучшения.

Спасибо.

Ответ 1

Поэтому я не знаю ничего о haskell или yesod, но было не сложно интегрировать angular с Yesod. Пожалуйста, следуйте инструкциям, чтобы в итоге появилось рабочее приложение.

Ниже приведены шаги, которые я выполнил для настройки

Последовал быстрый запуск Yesod для настройки приложения Yesod

brew установить haskell-stack

добавить новый мой проект yesod-sqlite && & cd my-project

установить стек yesod-bin cabal-install --install-ghc

сборка стека

exec exec - yesod devel

Теперь вы можете получить доступ к простому веб-приложению OTB здесь. Сгенерированное приложение имеет следующую структуру:

Я использовал bower для установки pull в angular, jQuery и bootstrap
Я использовал собственный файл .bowerrc, чтобы вытащить пакеты внутри статической папки

.bowerrc

{
    "directory": "static/bower_modules"
}

bower.json

{
  "name": "my-project",
  "version": "0.0.0",
  "authors": [
      "Atef Haque <[email protected]>"
  ],
  "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 устанавливает пакеты внутри каталога static/bower_packages

Теперь я добавил свои скрипты и шаблоны внутри статических/скриптов и статических/шаблонных каталогов соответственно.

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, из которого может быть захвачен angular!

Я отредактировал шаблон /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, вероятно, не позволяет обрезать фрагменты кода, поэтому я должен был отделить его

Теперь, когда вы идете здесь, у вас будет веб-приложение с интерфейсом angular, работающим на бэкэнде Yesod.

Вещи, которые могут показаться волшебными

Отправка комментариев работает без какого-либо внутреннего кода? Нет, он приходит OTB:)

Надеюсь, что я мог бы думать лучше, чем они были!