faylang / fay-angular

Fay FFI bindings for AngularJS

This is a stub package for making AngularJS bindings to Fay.

If you would like to help out, send an e-mail to [email protected] and I will give you push access. You can decide if you want to simply push, or open up pull requests if you want code reviews.

Feel free to open up issues for discussions and questions here, no matter if they are related to Angular or just general Fay things. This should be a good place to have these discussions, people who are interested can watch the repo or check the issue list instead of us trying to gather elsewhere.

==========

POC angular bindings into Fay

cabal update && cabal install fay fay-base
cd ../thisRepo/pocapp
fay Main.hs --include ../src

fay-angular's Issues

Creating Angular Controller from Fay Module: API brainstorm

Here's what I'm using to generically build a controller out of a Fay module.

# CoffeeScript

angModule = angular.module("angModule", [])

angModule.controller("FooCtl", ($scope) ->
        $scope[k] = v for own k, v of Strict.HaskModule
)

Assuming this is even a good starting point, is there a way to package up that code into Fay action? Say, for instance,

angularModule :: Text -- ^ module's name
              -> [AngularModule] -- ^ module deps
              -> Fay AngularModule

addController :: Text -- ^ controller name
              -> Text -- ^ Haskell module to use (FIXME, obviously(?))
              -> AngularModule -- ^ Angular module to attach the controller to
              -> Fay ()

and then:

main = do
    angMod <- angularModule "angModule"
    addController "FooCtl" "HaskModule" angMod

Data binding depends on js representation of datatypes

This is mostly a conceptual issue that isn't too hard to work around in practice. AngularJS lets you bind data between templates and $scope using strings that are basically paths into JS objects. For example, if we have $scope.person = { age: 30 }, then a template can do ngModel="person.age". This means that users of angular-fay will have to be aware at all times of Fay's representation of data types as js objects (so they can write ngModel="person.data.age" or whatever), and that Fay will be tied to a specific representation or it could break everyone's templates. The only way I can I think of to avoid this pain point would be to modify angular's template parsing code.

Generating controllers via ffi templating

In commit 2956a4b (branch example-templating) I'm trying to generate Angular controller code via Fay ffi,

In src/Angular.hs there is:

data StateController a = SC
  { muts :: [(a -> a)]
  , gets :: [Text]
  }

stateController :: StateController a -> a -> Fay ()
stateController = ffi "\
  \ (function($scope) { \
    \ $scope.state = %2; \
    \ var sc = %1; \
    \ \
...

which is called in examples/todo/todo.js:

TodoCtrl = Strict.Angular.stateController(Strict.TodoFay.todoSC,Strict.TodoFay.initialState);

However this fails with:

Error: Argument 'TodoCtrl' is not a function, got Fay$$Monad

The goal is to generate all the Angular code required for a Controller (and later, for a Directive etc.) from a Haskell specification, so fay-angular would need to generate various javascript classes/functions that are structured in the required way, with argument name $scope etc. Any suggestions about where the best place to implement this would be? is it possible from within a fay library, or will it require some modification to the fay compiler itself?

Use TypeScript type defintions as a starting point?

They can be found at https://github.com/borisyankov/DefinitelyTyped/tree/master/angularjs

Related to this we plan to be able to automatically generate bindings from these files, see faylang/fay#328. But I'd say we can get started with bindings before that's done.