Geek Answers Handbook

How to support / use angular2 multiple renderings?

So, the idea that angular2 will support multiple rendering engines (HTML, native via NativeScript and React Native), what does this development story look like?

Is there a dynamic template switching? Or should this be handled with a subclass?

// TypeScript ahead // Base component implementation class FooComponent { public name: string = 'my name'; public makeFormal () { this.name = this.name.toUpperCase(); } } // HTML Component @Component({ selector: '<foo></foo>' template: ` <div>{{name}}</div> <button (click)="makeFormal()">Make Formal</button> ` }) class FooHtmlComponent extends FooComponent { constructor(){ super(); } } // Native Component @Component({ selector: '<foo></foo>' template: '... [native stuffs here] ...' }) class FooHtmlComponent extends FooComponent { constructor(){ super(); } }
+7
angular
source share
3 answers

  • Subclassing a component is one way to do this.

  • You can use several decoration decorators to call the following:

 @Component({selector:'foo', template: `some nativescript template`}) class Foo {}

matches with:

 @Component({selector:'foo'`}) @View({ template: `some nativescript template` }) class Foo {}

You can then provide several views for the same component.

 @Component({selector:'foo'}) @View({ template: `some nativescript template`, platform: 'nativescript' }) @View({ template: `some dom stuff`, platform: 'dom' }) class Foo { }

Finally, the build step will create a package for each platform, with all the code designed to remove other platforms. The same method can be used to provide language patterns for components.

  1. Angular 2 allows you to write a component with one view, which can work on all dom platforms (browser, node, web worker).

So you can just do the following:

 @Component({selector:'foo', template: `some dom template`}) class Foo {}
+6
source share

NOTE. All of this can change because Angular 2 is still alpha.

There were some good talks at AngularConnect 2015 about this.

In particular, you will want to check out Angular Universal , which is a "universal" (aka Isomorphic) (aka app primed on server) rendering method for Angular 2.

There is also a library for rendering for React-Native that contains more information about this.

I hope this helps.

(PS: tagged community wiki because the answer is so vague);)

+3
source share

When the first glimpses of Angular 2 began to appear more than a year ago, this is one of the most interesting areas for me. Initially, I was thinking more about what Victor mentioned above about having several @View decorators for each target platform. It is either still in operation, undocumented, or no longer planned (am I not sure?).

However, as events unfold, I began to see a cleaner integration potential with custom Decorators . I described this strategy in detail here: http://angularjs.blogspot.com/2016/03/code-reuse-in-angular-2-native-mobile.html

In addition, I have proven this strategy here: https://github.com/NathanWalker/angular2-seed-advanced

I look forward to other alternative approaches and still don't know which is better (if there is such a thing), but I like the Decorator user approach.

The idea that we will create steps that will create different versions of your application with the correct @View decoder, as mentioned in it, still sounds very useful and hopes that (at least in some form) is still in the roadmap for Angular 2.0.

+1
source share

More articles:


All Articles