如何使用Yesod构建AngularJS应用程序
Dam*_*les 14 javascript json haskell yesod angularjs
我设法使用Yesod成功编写了一个小应用程序.现在我处于我希望为其添加更好的交互的阶段,我想使用AngularJS来做到这一点.
据我所知,Yesod对AngularJS的支持仍然是实验性的.而且,到目前为止我找到的文档对我来说是无法访问的.我没有掌握所有的Yesod概念.
所以我想知道,有哪些方法可以集成AngularJS和Yesod框架.我在想的是:
- 在AngularJS中编写前端.
- 使用Yesod开发Web服务.
- 通过GET和POST http请求连接前端和Web服务.可以通过输入表单(以这种方式利用一些Yesod功能)将信息发送到服务器,并且可以通过JSON对象将信息发送到前端.
理想情况下,我想在Haskell中编写所有内容,但在目前的情况下可能不可能.因此,我想问一下,我想到的替代方案是否是一个好方法,以及是否有办法改进它.
谢谢.
ate*_*fth 10
因此我不知道有关haskell或yesod的事情,但将角度与Yesod集成并不太难.请按照步骤操作,以便最终得到一个可用的应用程序!
以下是我设置的步骤
按照Yesod快速入门设置Yesod应用程序
brew安装haskell-stack
堆栈新的my-project yesod-sqlite && cd my-project
stack install yesod-bin cabal-install --install-ghc
堆栈构建
堆栈执行 - yesod devel
现在,您可以在此处访问简单的OTB Web应用程序.生成的应用程序具有以下结构:
- 我用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>
<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代码片段,所以我不想将它分开
现在,当你去这里时,你将拥有一个带有角度前端的web应用程序,该应用程序由yesod后端驱动.
看似神奇的事情
- 发布评论没有任何后端代码？不,它来OTB :)
希望我能让思考比他们更清楚!