HaXe and AngularJS?

[Cambiata]

I've been following the development of AngularJS, a Google funded MVC-DI-databinding-javascript framework created by Misko Hevery among others, with great interest:

Brand new home page (under develpment): http://angular.github.com/angularjs.org
Here's a great video introduction by John Lindquist (well known in the flash community): http://johnlindquist.com/2012/04/04/angularjs_tutorial.html
Here's Misko explaining the concepts at BayJax sept 2011 (please note that's he's refering to 0.9 releases): http://www.youtube.com/watch?v=khk_vEF95Jk

Coming from flex development I really like the concept of

• declarative and directive extendable html views
• plain vanilla javascript controllers spiced with DI
  
• two way databinding model concept connecting controllers and views - no dom manipulation in controllers
  

I'ts getting closer to 1.0 release and things are starting to take off.

I just want to hear from you guys: What are the possibilites of integration between HaXe and AngularJs? (I'm completely new to haxe js myself.)
Would it be possible to fully abstract js parts to HaXe?

/ Jonas

[Baluta Cristian]

From what i understand this Angular will parse your html and make corresponding calls in other js files you've imported.

You have to generate htmls, and js target is not for that, maybe php. 

You could work with haxe in a very oop and typesafe way, why would you go for this? 

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en

--
Băluță Cristian
http://ralcr.com
http://imagin.ro

[Cambiata]

From what i understand this Angular will parse your html and make corresponding calls in other js files you've imported.

You have to generate htmls, and js target is not for that, maybe php. 

Yep, I'm not thinking of the html parts...
I'm just wondering if it would be possible to integrate HaXe js and Angular in a way that HaXe js would render Angular compatible js code for controllers, services etc... Or would this require a completely new AngularJS target..?

If I turn the question upside down:

What's the HaXe status when it comes to web application development in a mvc way that abstracts dom manipulation away in a manner comparable to Angular?

[Jason O'Neil]

Hi

I'm working on a JS library (called DOMTools, not a great name, but anyway) that is similar in many ways to jquery, but more haxe like.

Part of my motivation here was to make it easy to create the "view" part of MVC, and create views with data binding, or custom widgets/controls/elements etc.

I've already used it for a few things: creating a html form based on a model, table views of data, a basic prototype of a bindable view, so it self-updates when the object properties change.

I'm aiming to have a demo up this week sometime. I'm not sure how similar it is to angular, but maybe once it's up you can have a look and see if it's relevant...

Jason

...

Sent from my phone, so apologies for any typos...

[Tony Polinelli]

Angular definitely looks interesting, thanks for the link! Im also very interested in how haxe might be used to create controllers, etc. and if it could be compatible with angular.

--
Tony Polinelli
http://touchmypixel.com

[Tony Polinelli]

Ive done a test- and you can use: 

class MyController

{

  var myVar:String;

  function new()

  {

    myVar = "test";
  }

}

to do the same as:

function MyController(){

   this.myVar = "test";

}

EXCEPT that the compile adds in a 'p' parameter when you dont have any params, which errors angular. removing this from the code makes things work. If you could add an '$xhr' param, (for example) that would fix this error.. but the problem we have next is that you cant prefix with $ in haxe. So their dependancy injection cant work (as it expects $xhr). So, i think that it going to be one of the MAJOR issues. As the first issue (removing the manditory p param) would be easy. 

hmm. anyone have some more ideas? Maybe there should be a way to 'not' use $ as prefixes - and we could talk to the angular guys for this option. 

[Tony Polinelli]

or even better - could haxe allow $var variables - and just replace the $ with something else on platforms which dont support it eg : $v -> ____var, this could allow some nice shortcuts - like JQuery style usage... which is more concise

[tom rhodes]

would cause a few probs with SPOD macros...

SPOD.manager.search($dbValue == haxeValue)

[Tony Polinelli]

Ive done a bit more research & playing with angular - because i think it looks like a great way to program html5 - and i think there is definately a way to integrate with haxe. The benefits of doing this may be questionable (im thinking over this now) but its definately possible. 

To get around the $dependancy option, you just need to use the MyController.$inject  - in an init phase. This could be automated using macros - at the moment i just have it hardcoded. 

Since the 1.0xxRCx  versions now take a $scope param - this is good as it allows less naming chance for naming clashes - and really not much need to enforce $xxxx - as the scope vars are in a seperate object - and we can typedef this for completion. 

We can also extern all of the $dependancies - which would be the main benefit of haxe with angular i feel. 

the Angular class (main lib of functions) could provide a heap of static access to functions - bind, copy, uppercase, etc. etc. too. 

im looking over what 'inherited' functionality there would be, which might allow for better completion, but im finding that a lot of things are 'injected' rather than inherited - which means that the main externing will be those services. 

So, its definitely possible, i feel that it will take a bit more exploring, and understanding of the system, to be able to know exactly the approach. But check out the example ive attached - ive externed the $http class. ps. run it through a server to allow the http to work properly. 

Cambiata - is this what you were looking for when asking your initial question? 

cheers 

Tony

[Cambiata]

Hi Tony!

Really exciting stuff, definitely in the direction I was looking for! Thank you!
Some quick experimenting here below, adding a controller method. Seems to work as
expected. Is this how you would do it?
/ Jonas

site/Controllers.hx:

class MainController extends Controller {
    public static function __init__() {
        untyped __js__("site.MainController.$inject = ['$scope', '$http'];");
    }
   
    private var scope:MainControllerScope;
   
    public function new(scope:MainControllerScope, http:Http) {       
        this.scope = scope;

        http.get("data.txt")
            .success(function(data) {
                scope.test = data;
            }).error(function(data) {
                scope.test = data;
            });
       
        scope.testMethod = this.testMethod;
        scope.items = ['Item one', 'Second item'];
    }
   
    private function testMethod() {
        scope.test = 'This is a test method';
        scope.items.push('Item #3');
    }
}

typedef MainControllerScope = {
    public var test:String;
    public var testMethod:Dynamic;   
    public var items:Array<String>;
}

bin/index.html

<!doctype html>
<html ng:app>
    <script src="js/angular-1.0.0rc4.min.js"></script>
    <script src="js/AngularHaxe.js"></script>
   
    <body>
        Hello {{'World'}}!
        <div ng-controller="site.MainController">{{test}}
            <button ng-click="testMethod()" >Call testMethod()</button>
            <ul>
                <li ng-repeat="item in items">{{item}}</li>
            </ul>
        </div>
       
        <div id="haxe:trace"></div>
    </body>
</html>

[Tony Polinelli]

Oh yeah,  I didnt think of how other methods would access scope - you would need to do this for each of the services that are injected... which would get tiring, but i think - same as the inject generator - it could be managed by a macro. 

Basically, the macro would need to look at the params of the constructor and make the __init__ call for them - adding the $ where needed (based on a list of $-services, orthers wouldnt need a $), then adding vars for all of the services to the controller. It could even populate the methods onto the scope object - so you dont need those links. 

So, i think you are doing it correctly (the only way possible atm for haxe), but this could be aided by a macro - we'd just need a smart macro writer to pitch in ;P anyone? anyone?   Then someone would need to make all of the externs. Maybe it would be best to wait for the v1 release - so that that API doesnt change - although rc4 is pretty close - so you could get started if interested. 

The thing is tho - i wonder how useful this would be - as does it just make things more complex ? I havent used angular enough to really know fully how you use it -- so i dont know complex controllers will become. 

cheers

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en

[Tony Polinelli]

note - they recommend when you write your own services NOT to prefix with $ - these are only for the 'core' services... so there shouldnt be an issue  with having a list of 'official ones' where the macro should need to add a $