Support for migrating angular apps

[d6y]

Hello

I'm looking at a "legacy" (i.e.,old-ish and JavaScript) Angular 1.x application, and wondering if I can gradually port it over to Scala.js with support from scalajs-angulate.

What I mean is, I currently have something like...

// JavaScript
var App = angular.module("Dashboard", [ 'ngDialog', 'blueimpfileupload'] );
App.filter(.... );
App.directive(....);
// ...etc

I'd like to slowly port this, as we touch parts of the application, to Scala.js, rather than sit down for a big re-write.

Perhaps I'd start...

// Scala.js
def makeApp() = {  
  angular.createModule("Dashboard", Seq("ngDialog", "blueimp.fileupload"))
}

// JavaScript
var App = MyApp().makeApp();
App.filter(...etc...); // <- unchanged
App.directive(....); // <- unchanged

...and later I'll implement the filter in Scala.js and include it in my myApp method.

Is there any design goal here to support that style of adapting an application?

---

BTW, I notice it appears to be possible if I reference self$1:

// JavaScript
var App = MyApp().makeApp().self$1;
App.filter(...etc...);

...but that's perhaps just luck!

[jokade]

To be honest: I haven't considered migrating a legacy Javscript app (yet). I'm not sure, if it is necessary to provide special support from scalajs-angulate to this end, but I'd be happy to support you on your way.

Your approach looks good to me; you only need to annotate makeApp with @JSExport to make it visible in Javascript, i.e.:

// Scala.js
@JSExport
def makeApp() = ...

// JavaScript
var App = MyApp().makeApp();  // <-- this works when makeApp is exported

One useful pattern for gradual migration might be to split off the migrated parts into a separate angular module, e.g.:

// Scala.js
// module with migrated parts
@JSExport
object Migrated {
  val module = angular.createModule("DashboardMigrated", Seq(...))

// register migrated directives, controllers, ...
  module.directiveOf[...]
}

// JavaScript
Migrated();   // this registers the module "DashboardMigrated"
var App = angular.module("Dashboard", [ "ngDialog", "blueimpfileupload","DashboardMigrated"] );
...

[d6y]

Thanks @jokade - that's a neat idea regarding putting the migrated parts into a separate module.

Regarding the @JSExport on def makeApp, I do have that in place (sorry: I should have pasted more code). I may have some other problem in this app. I'll investigate further. Thanks for your help.

[d6y]

A quick update on this: moving from Angular 1.2 to 1.3 removed the need for me to add self$1. Thanks again for your help, and the module trick is working out really well.

[jokade]

Ah yes... I didn't test this library with Angular <= 1.3. Probably should look into this or at least add a note about compatibility on the main page. Thanks for the update.