Fable: Question Fable - Angular

[AngelMunoz]

Hello everyone! Awesome project I was interested in F# but due to work stuff I went a bit more isolated to webtech, however Fable seems my way back to F# :)

I tried to ts2fable on the angular.d.ts and succesfully generated the _"typings"_ for it however perhaps to the lack of my F# knowledge I can't seem to find a way to use it propperly

#r "node_modules/fable-core/Fable.Core.dll"

// it succesfully finds the fs file within the same directory
#load "Fable.Import.Angular.fs" 
open System
open Fable.Core
open Fable.Core.JsInterop
open Fable.Import
open Fable.Import.angular

this is the way I'm trying to load it and use it but no luck any suggestions or pointers?

[alfonsogarciacaro]

Hi, nice to hear you're interested in Fable! Are you using Angular 1 or 2? I don't know well Angular 1 and using Fable with Angular 2 is complicated because it doesn't support JS decorators yet. For frameworks like this, it's not usually enough to have the bindings and some work it's necessary to create some helpers to help the interaction between F#/Fable and the JS framework.

This work hasn't happened yet for Angular (but it'd be great if you could start it), so I'd recommend using another framework like React (tutorial coming soon) or Virtualdom.

[AngelMunoz]

Hi, thanks for the answer.
I'm using Angular 1 (since it's the one I'm more familiar with)
I'm not really skilled in F# while I certainly understand some stuff, I couldn't say I am good programming it. however I would be interested in helping wherever I can :)

[alfonsogarciacaro]

Community effort is focusing on React and Virtualdom at the moment so I'm closing this for now. Of course if you want to start some work with Angular you can on our help! Please check gitter channel: gitter.im/fable-compiler/Fable

[Neftedollar]

using Fable with Angular 2 is complicated because it doesn't support JS decorators yet

But u can use js version.
example from angular.io

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>Hello Angular</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));