Angular 2 - Docs + Examples about fela

[robinweser]

Oh that would actually be really awesome!

I am not quite into Angular, but I guess Angular 2 is already used a lot right? Also if its already a RC I guess we are fine to just use that one. Should not change much right?
I would really love to see a TypeScript example if possible, but yet of course it is up to you. All 3 would be best, if 2 I would go with TypeScript, but it's also fine to just have the basic JS examples.

I am really looking forward to see your PR soon :)

[clouless]

Ok nice :).
I just finished diving into a real live example with a tiny react application
and I might need to write some helper or think of something like this mapStylesToProps thing and what the corresponding thing in Angular 2 would be.

It will take me sometime but I will provide it :)

Since in my company we are sometimes forced by the customer to use Angular 2 instead of React I want to have at least the styling independent :)

[clouless]

Status / Todo

• 💎 Pull Request = ready to merge
  • #67

---

1. Typescript Angular 2 Example

• 🔵 Typings
  • 💚 Basically done and working.
  • 💚 Write Interfaces with Exports for all classes/methods in index.d.ts
  • 🔴 TODO-POSTMERGE:
    • after merge of #67 and deploy to npmjs increase version of /examples/angular2/typescript/package.json fela dependency so that the typescript bindings can be used.

---

• 🔵 Example
  • 💚 Code Example is done and working see examples/angular2/typescript
  • 💚 Documentation see UsageWithAngular2TypeScript.md

---

• 🔶 Needs Clarification / Action Items
  • ✅ index.d.ts location => all ok
    • The question is: Is this packages/fela/ the right place to put it?
    • Or do you want it to place somewhere else and configure your buildchain?
  • ✅ SystemJS Loader Problems because of require => won't fix
    • The SystemJS Loader used for Angular2 has problems when trying to load the node_modules/fela/index.js. It contains a require call to dist/fela.js. I will provide documentation on how to come around that, but wouldn't it be nicer if the package.json would point to "main": "./dist/fela.js" directly?
  • ✅ gitbook plugins => included in PR #67
    • Can you install the gitbook-plugin-advanced-emoji for the documentation on fela.js.org so that I can use emojis in my docs, thx.

---

2. Plain JS Angular 2 Example

• 🔵 Example
  • 💚 Code Example is done and working see examples/angular2/javascript
  • 💚 Documentation done, see UsageWithAngular2JavaScript.md

---

3. DART Angular 2 Example

‼️ DART EXAMPLE IS REMOVED FROM PR #67 BECAUSE IT DOESN'T WORK ‼️

• JS Bridge
  • So Dart cannot natively use JavaScript and you need to use some kind of bridge. I tried to do so in fela_js_bridge.dart
    • This does not work currently and I am a little helpless here since the only example is the ChartJS Bridge
• Ugliness
  • I don't know who really uses Dart but when you always have to write your own dart bridge for every library from the web I think you are doomed.
  • Secondly: Dart does not seem to have nice syntax for "Json-Like-Objects" and the rule-set now looks like s++t. See here: app_component.dart
• PackageManager
  • Of course dart uses its own package management so for now you are doomed to use Fela from CDN. Or you publish a dart package which you have to maintain :(

useful dart js links

• https://www.youtube.com/watch?v=aIonwL-8hdE&feature=youtu.be

* https://github.com/google/chartjs.dart

[clouless]

@rofrischmann I am done for now. Typescript and ES6 Examples + Documentation is done.
We just need to clarify the stuff above :)

[clouless]

FYI: Angular 2 Dart - Work in Progress

• Example Angular2 Dart
• UsageGuide

fela-angular2-dart.zip

[robinweser]

With the release of 1.2 we should be able to use Fela with Angular. I will close this issue for now, as the Dart example does not seem to be fixed too soon. I will yet try to bring some details back into the documentation, but I had to strip it off to be conform to the React/Inferno docs which only cover React/Inferno specific stuff but do not cover Fela configs at all (which was part of the Angular docs as well).