我成功地使用Yesod編寫了一個小應用程序。現在我正處於我想爲其添加更好交互的階段，並且我想使用AngularJS來完成此操作。如何使用Yesod構建AngularJS應用程序
據我所見，Yesod對AngularJS的支持仍然是實驗性的。而且，我迄今發現的文檔對我來說是無法訪問的。我不掌握所有的Yesod概念。
所以我想知道，什麼是可能的方式來集成AngularJS和Yesod框架。我正在考慮的是：
理想情況下，我想在Haskell中編寫所有內容，但在目前的情況下可能不是這樣。因此，我想問一問，我所考慮的備選方案是否合適，以及是否有改進方法。
謝謝。
所以我不知道關於haskell或yesod的事情，但是將角度與Yesod整合並不太困難。 請按照以下步驟完成一個有效的應用程序！
這裏有我也跟着成立
沿襲耶索德快速入門成立耶索德應用
沖泡安裝哈斯克爾堆棧的步驟
stack new my-project yesod-sqlite & & CD我的項目
堆棧安裝耶索德斌小集團安裝--install-GHC
棧建立
棧EXEC - 耶索德devel的
現在您可以訪問簡單的OTB網絡應用程序here。將所生成的應用程序具有以下結構：
.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_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>
在這一點上，我們都設置在前端。現在，我必須配置後端，以便從angular可以接管的角度提供一個index.html！
默認佈局wrapper.hamlet頭
<!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">
不幸的是可能＃2不允許哈姆雷特代碼片段，所以我對哈得
分開呢現在，當你去here你就會有一個角前一個Web應用程序 - 由一個yesod後端供電。
事情可能看起來像魔術
希望我可以讓認爲比他們更清楚！
您是否看到Michael Snoyman的存儲庫：https：//github.com/snoyberg/yesod-js？ – Sibi
是的。這是我提到的「我無法訪問」的資源之一。鑑於我對Yesod的理解有限，我需要一些教程格式的東西。我不想結束我不明白的解決方案。這就是爲什麼我要採取我描述的「捷徑」。 –
看到這個：http://blog.wuzzeb.org/posts/2015-02-04-yesodangular-bower.html – frt